React에서 JS를 HTML처럼 사용할 수 있었던 이유(JSX)

React에서 JS를 HTML처럼 사용할 수 있었던 이유(JSX)

오늘은 전 시간에서 궁금할 수 있었던 점인

JS에서 HTML처럼 사용할 수 있는 이유에 대해서

간단하게 설명드리려고 합니다.

 

우선 처음 React를 생성하고 웹을 실행하시고

src폴더에 App.js를 수정하면 웹의 모습도

똑같이 변한다는 것을 확인하실 수 있었습니다.

 

※

App.js 처럼 JS인데 HTML처럼 사용하는데

이것은 HTML을 사용하는 것이 아닌

HTML과 비슷하게 작성할 수 있는

JSX라는 문법을 사용하는 것입니다..

 

그러면 어떻게 JS에서 HTML처럼 사용할 수 있는지 설명을 드리면

1) App.js에 작성된 JSX를

2) 같은 폴더에 있는 index.js에서 읽고

3) public 폴더에 있는 index.html에 옮겨지는 것입니다.

 

JS를 공부하셨으면 아실 내용인데 JS를 사용하면 HTML에

내용을 추가하거나 수정할 수 있습니다.

 

index.js에서

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

이 부분을 통해서 index.html 파일에 있는 root라는 id를 가진 태그에 

JS에서 JSX로 작성된 코드를 HTML 태그에 전달해주는 역할을 합니다.

 

이런 식으로 JS에서 HTML처럼 사용할 수 있는 이유를 알아보았습니다.

결론적으로 JS에서 JSX라는 문법으로 HTML처럼 사용할 수 있었고

다른 파일에서 JSX를 HTML파일로 전달해서

JS에서 HTML처럼 사용할 수 있었던 것입니다.

 

---

 

오늘은 JS에서 HTML처럼 사용할 수 있는 이유에 대해 알아보았습니다.

결론적으로 JS에서 JSX라는 문법으로 HTML처럼 사용할 수 있었고

다른 파일에서 JSX를 HTML파일로 전달해서

JS에서 HTML처럼 사용할 수 있었던 것입니다.

 

그리고 굳이 JS에서 JSX를 사용해서 하는지에 대해서는

다음 시간에 설명드리겠습니다.

 

감사합니다!