JSX

JSX란

JSX란 리액트에서 사용되는 언어로 JavaScript를 확장한 문법이다.
XML과 매우 비슷하게 생겼으며, 브라우저에서 실행되기 전에 코드가 Babel을 통해 일반 자바스크립트 형태의 코드로 변환된다.

JSX를 사용하면 HTML과 JavaScript를 혼합하여 작성할 수 있으므로 UI를 더 직관적으로 구성할 수 있다.

프로젝트 예제를 통해 살펴보자.

const ToDoForm = () => {
  return (
    <div>
      <h1>ToDoList Form !!!!</h1>
    </div>
  );
};

export default ToDoForm;

JavaScript와 HTML 태그인 div, h1 을 혼합하여 작성한 사용자 컴포넌트이다.

const ToDoForm = () => {
  return (
    React.createElement('div', null,
                        React.createElement('h1', null, 'ToDoList Form !!!!'));
  );
};

export default ToDoForm;

해당 코드는 브라우저에서 실행되기 전에 배후에서 Babel 등을 통해 위 코드와 같이 일반 자바스크립트 형태의 코드로 변환된다.

const ToDoForm = () => {
  const name = 'TodoList';
  return (
    <div>
      <h1>{name} Form !!!!</h1>
    </div>
  );
};

export default ToDoForm;

또한 {}를 이용해 JavaScript코드를 사용할 수 있다.

사용자 컴포넌트는 export시켜 다른 컴포넌트에서 사용할 수 있다.

import './App.css';
import ToDoForm from './components/ToDoForm/ToDoForm';

function App() {
  return (
    <div className="App">
      <ToDoForm></ToDoForm>
    </div>
  );
}

export default App;

다음은 props에 대해서 알아보자.