JSX의 기본규칙

코딩하는망아치 2021. 5. 3. 21:07

JSX는 리액트에서 생김새를 정의할때 사용하는 문법이다.

얼핏보기에는 html같이 생격지만 실제로는 JavaScript이다

return <div>안녕하세요</div>;

리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면 bable이 JSX를 JavaScript로 변환을 해준다.

어떻게 변환되는지 한번 예시를 보자

Babel은 자바스크립트의 문법을 확장해주는 도구이다.

아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해 줌으로서 구형 브라우저 같은 환경에서도 제대로 실행할수 있게 해주는 역할을 한다.

꼭 닫혀야 하는 태그

태그는 꼭 닫혀있어야 한다.

다음과 같은 코드는 오류가 발생하게 된다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <div>
    </div>
  );
}

export default App;

태그를 열었으면 꼭, <div></div>이렇게 닫아줘야 된다.

HTML에서는 input또는 br태그를 사용 할 때 닫지 않고 사용하기도 한다. 하지만 리액트에서는 그렇게 하면 안된다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <input>
      <br>
    </div>
  );
}

export default App;

태그와 태그 사이에 내용이 들어가지 않을 때에는, Self Closing태그 라는 것을 사용해야 ㅎ나다. 현재 Hello컴포넌트를 사용 할 떄에도 Self Closing 태그를 사용해 주었는데, 열리고 바로 닫히는 태그를 의미한다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <input />
      <br />
    </div>
  );
}

export default App;

꼭 감싸져야 하는 태그

두개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 한다. 한번 다음 코드를 작성해보자.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello />
    <div>안녕히계세요.</div>
  );
}

export default App;

이런 코드는 오류가 발생하게 된다.

그 대신에 하나의 태그로 감싸주어야 한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

export default App;

하지만 이렇게 단순히 감싸기 위해 불필요한 div로 감싸는게 별로 좋지 않은 상황도 있다. 예를 들어서 스타일 관련 설정을 하다가 복잡해지게 되는 상황도 올수 있고, table관련 태그를 작성 할 때에도 내용을 div같은걸로 감싸기엔 애매하다. 그럴 땐, 리액트의 Fragment라는 것을 사용하면 된다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

태그를 작성 할 때 이름없이 작성을 하게 되면 Fragment가 만들어지는데, Fragment는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

JSX안에 자바스크립트 값 사용하기

JSX내부에 자바스크립트 변수를 보여줘야 할때에는 {}으로 감싸서 보여준다.

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

style과 className

JSX에서 태그에 style과 CSS class를 설정하는 방법은 HTML에서 설정하는 방법과 다르다.

우선, 인라인 스타일은 객체 형태로 작성을 해야하며, background-color처럼 -로 구분되어 있는 이름들은backgroundColor처럼 camelCase형태로 네이밍 해주어야 한다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

그리고 CSS class를 설정 할때에는 class=가 아닌 className=으로 설정을 해주어야 한다. 한번 App.css파일을 열어서 전체 내용을 지운뒤 다음과 같이 수정해보자.

App.css

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

그 다음 App.js를 다음과 같이 수정해보자.

App.js

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

주석

이제, JSX에서 주석은 어떻게 작성하는지 알아보자.

JSX내부의 주석은 {/* 이런형태로 */} 작성한다.

한번 사용해보자.

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      {/* 주석은 화면에 보이지 않습니다 */}
      /* 중괄호로 감싸지 않으면 화면에 보입니다 */
      <Hello 
      />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

추가적으로, 열리는 태그 내무에서는 // 이런 형태로도 주석 작성이 가능하다.

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      {/* 주석은 화면에 보이지 않습니다 */}
      /* 중괄호로 감싸지 않으면 화면에 보입니다 */
      <Hello 
        // 열리는 태그 내부에서는 이렇게 주석을 작성 할 수 있습니다.
      />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;