[리액트 분석하기] 리액트의 핵심 JSX에 대해 알아보자. (부제 :: 리액트에서는 JSX를 어떻게 이용할까?)

우리는 지금까지 계속 리액트에 대한 핵심에 대해서 이야기를 했었다.

 

이제 그 리액트라는 것이 어떤 식으로 돌아가는지 확인해보자.

JSX

JSX는 JavascriptXML이라고 하는데, 이는 Javascript도 아니고 HTML도 아닌 것이다. 정확히는 스크립트에 확장 문법이라고 하는 것인데, 우리는 리액트로 이 JSX를 할용하여 UI를 구성할 것이다.

이렇게 말 하면 너무 어려우므로 우리가 create-react-app을 통해서 프로젝트를 생성했다고 가정하고, 해당 코드에서 JSX란 무엇인지 보이겠다.

코드로 봐보자

우리의 프로젝트에서 Index.js에 있는 코드를 한 번 봐보자.

ReactDOM.render();라는 구문에서 우리는 JSX를 사용할 것이다.

원래 코드를 지워보고 다음과 같이 구성해보자.

 

<React.StrictMode></React.StrictMode> 에 내용을 <div></div>으로 바꿔서 js 안에서 html태그를 이용해보자.

 

 

그리고 npm start 명령어로 리액트 라우팅을 시도해보자. 그럼결과 화면에는 다음과 같이 나오게 된다.

 

 

이렇듯 가상 리액트 돔은 index.html에 root라는 id를 찾아 그 곳에 html 태그를 추가시켜주는 그런 기능을 한다.

 

이걸 활용한다면 우리는 리액트의 다양한 장점을 이용해서

재사용성이 높은 컴포넌트 프로그래밍이 가능해지고, 더 구조화 시킬 수 있게 된다.