[React] JSX 이해하기

안녕하세요. 이번시간에는 리액트를 매우 편리하게 개발 할 수 있게끔 도와주는 JSX에 대해 알아보겠습니다!

JSX란?

Java Script XML의 약자이며, 자바스크립트의 확장된 문법이라고 합니다.
리액트에서 html 내 body에서 작성하던 마크업 방식과 동일하게 마크업을 해줄 있게 만들어주는 매우 편리한 문법입니다. 하지만 브라우저는 이 코드를 자바스크립트로 이해해서 처리를 못하기때문에, 바벨이란 것이 JSX 코드를 브라우저가 이해할 수 있게 변환 시켜줍니다.

JSX 코드 예시

function App() {
  return (
    <div className="App">
      안녕하세요. 제가 바로 JSX 문법입니다.
    </div>
  );
}

이런식으로 컴포넌트 내부에 리턴값에다가 element요소를 그대로 쓸 수 있게 만들어주는 것이죠.

이렇게 작성한것을 실행하면 바벨이라는 환경이 브라우저가 이해할 수 있게 내부적으로 React.createElement를 사용하는 리액트 코드로 변환하여 줍니다.

React.createElement(
  'div',
  null,
  '안녕하세요. 제가 바로 JSX 문법입니다.'
);

참고자료

https://ko.reactjs.org/docs/introducing-jsx.html#:~:text=JSX%EB%9D%BC%20%ED%95%98%EB%A9%B0%20JavaScript%EB%A5%BC,%EA%B8%B0%EB%8A%A5%EC%9D%B4%20%ED%8F%AC%ED%95%A8%EB%90%98%EC%96%B4%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4.