2. JSX(JavaScript XML)

JSX(JavaScript XML)

- React 라이브러리에서 사용되는 자바스크립트 확장 문법

- JavaScript 코드 안에서 XML 형태의 구문을 작성하여 UI 컴포넌트를 생성하는 방법

 

JSX 선언

const element = <h1>Hello, world!</h1>;

 

JSX에 표현식 포함하기

// name이라는 상수를 선언한 후 중괄호로 감싸 JSX 안에 사용함
const name = 'HHJ';
const element = <h1>Hello, {name}</h1>;

 

JSX 사용 예제

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Han',
  lastName: 'HJ'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

 

결과