자바스크립트의 JSX 확장 구문과 리액트 컴포넌트에서의 활용 방법

jsx란 자바스크립트에서 HTML과 같은 코드를 작성할 수 있게 해주는 확장 구문입니다.

 

예를 들어 다음과 같이 쓸 수 있습니다.

const element = <h1 className="heading">Hello, World!</h1>;

JSX의 주요 이점 중 하나 중괄호를 사용하여 HTML과 같은 코드 내에서 JavaScript 표현식을 작성할 수 있다는 것입니다. 이렇게 하면 콘텐츠를 동적으로 생성하고 데이터 및 사용자 입력을 기반으로 애플리케이션의 구조를 조작하기가 쉬워집니다.

 

예를들어

const items = ['apple', 'banana', 'orange'];

const list = (
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

JSX를 사용하여 이와 같은 데이터 배열을 기반으로 항목 목록을 생성할 수 있습니다.

 

리액트는 JSX 기반으로 만들어져있습니다.

 

다음에는 props에 대해 알아보겠습니다.