[React] JSX

JSX는 javascript를 확장한 문법으로 React에서 UI를 구성할 때 사용한다.

const element = <h1>Hello</h1>

 

JSX는 브라우저에서 바로 실행할 수 있는 javascript 코드가 아니기 때문에 Babel이라는 컴파일러로 먼저 javascript 코드로 변환을 한 다음에 실행이 된다.

규칙

• JSX는 하나의 element만 반환해야 한다. 즉, 여러 개의 element를 반환하고 싶다면 반드시 하나의 부모 element 안에 모두 넣어야 한다.

  //에러가 발생한다.
  function App(){
    return (
      <h1>hello</h1>
      <h2>world</h2>
    )
  }
  
  //두개의 자식 element를 하나의 부모 div element로 묶어서 return 해야한다.
  function App(){
    return (
      <div>
        <h1>hello</h1>
        <h2>world</h2>
      </div>
    )
  }​

• JSX 안에서 자바스크립트를 표현하고 싶으면 {...} 중괄호 안에 작성한다. 추가로 중괄호 안에는 Expression만 작성할 수 있다.
• map 메서드를 활용해서 리스트를 출력하고 싶을 때는 항상 key 속성 값이 있어야 한다. 여기서 key 값으로 배열의 index 값을 사용하는 것을 지양한다. 왜냐하면 만약 배열의 요소를 변경을 하게 되면 index 또한 바뀌면서 예상치 못한 일이 발생할 수 있기 때문이다.