[React] 02. JSX

벨로퍼트와 함께하는 모던 리액트

• 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/
• 진도 - 1.4. JSX

 

💬 JSX

• JSX는 HTML과 비슷한 형태를 가졌지만 실제로는 JavaScript이다
• 리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면 Babel이 JSX를 JavaScript로 변환한다
• Babel: 자바스크립트의 문법을 확장해주는 도구
  - 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해준
  - Bable을 통해 구형 브라우저 같은 환경에서도 자바스크립트가 제대로 실행할 수 있게 해 준다

 

✔️ JSX 기본 규칙

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

function App() {
  return (
    // 2개 이상의 태그는 반드시 하나의 태그로 감싼다
    // <div>를 남발하기보다 이름없는 태그인 Fragment를 사용한다
    <>
      {/* 태그에 컨텐츠가 없다면 SelfClosing한다 */}
      <Hello />
      {/* 컨텐츠가 있는 태그는 반드시 닫는다 */}
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

1. 태그는 반드시 닫는다
   - HTML에서는 <input> <br> 태그와 같이 사용할 때 닫지 않는 경우도 있으나 리액트에서는 지원하지 않는다
   - 태그와 태그 사이에 내용이 들어가지 않을 때에는, SelfClosing 태그를 사용한다 (예) <Hello />
2. 태그는 반드시 감싼다
   - 두 개 이상의 태그는 반드시 다른 태그로 감싸야한다. 그렇지 않으면 오류가 발생한다 (Fail to Compile)
   - 하지만 단순히 감싸기 위해 <div> 태그를 사용하는 것은 권장하지 않는다
   - 이럴 때엔 Fragment를 사용하도록 한다
       → Fragment: 태그를 작성할 때 이름 없이 작성을 하는 것을 말한다
       → Fragment 는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다

 

✔️ 주석

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

function App() {
  return (
    <>
      <Hello /> {/* 주석은 이렇게 */}
    </>
  );
}

export default App;

• JSX 내부의 주석은 {/* 내용 */}의 형태로 작성한다

 

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

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

function App() {
  const name = 'react';
  return (
    <>
      <Hello/>
      <div // 열리는 태그 안에는 이런식으로도 주석을 작성할 수 있다
      >{name}</div> {/* 자바스크립트 변수 사용 시 {}에 넣는다 */}
    </>
  );
}

export default App;

• JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {}으로 감싸서 보여준다
• 열리는 태그 안에 //를 사용해 한 줄 주석을 작성할 수 있다. 다음 내용은 주석 처리되면 안 되므로 줄 바꿈이 필요하다

 

✔️  style과 className

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 />
      {/* 자바스크립트 객체를 {} 안에 넣어 style 지정 */}
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

• 리액트에서는 인라인 스타일은 객체 형태로 작성한다
• background-color처럼 ``으로 구분되어 있는 이름들은 camelCase를 적용한다
  - background-color → backgroundColor
• class명을 지정할 때에는 class= 가 아닌 className=에 지정한다
• 기본 단위인 px을 사용할 때는 숫자만 입력해도 된다
• 기본 단위가 아닌 단위를 사용한다면 문자열로 작성한다