React의 JSX 문법 이해하기

리액트의 각 컴포넌트는 하나의 함수이고

JSX 문법 형태로 된 값을 리턴한다.

JSX를 사용하는 이유는 HTML 마크업 랭귀지와 비슷하게 생겨서

컴포넌트가 어떤 엘리먼트로 구성돼 있는지 한 눈에 파악하기 쉽기 때문이다.

그러나 JSX는 결국 자바스크립트이고 JSX의 각 요소들이 무엇을 의미하는지 알아야

다양한 방식으로 리액트를 구현할 수 있다.

 

import React from 'react';
import Profile from './components/Profile';

function App() {
  return (
    <div>
      <h2>
        hello
      </h2>
      <Profile name="john" />
    </div>
  );
}

export default App;

 

위의 JSX 문법은 아래의 자바스크립트 코드와 같다.

 

import React from 'react';
import Profile from './components/Profile';

function App() {
  return (
    React.createElement(
      'div',
      {},
      React.createElement('h2', {}, 'hello'),
      React.createElement(Profile, { name: 'John' })
    )
  );
}

export default App;

 

리액트에 JSX 코드를 쓴다는 것은 React.createElement 함수를 호출하는 것과 같다.

첫 번째 파라미터에는 dom을 가리키는 string이나 리액트 컴포넌트(function)가 올 수 있다.

두 번째 파라미터는 props 객체로, 이를 이용해서 props에 값을 넣을 수 있다.

세 번째 파라미터부터는 children을 의미한다.

네 번째, 다섯 번째 등에 인자를 추가해 여러 children을 넣을 수 있다.