입문자들을 JS의 핵심내용들을 공부하고 넘어오지 않기 때문에
물론 저도 그랬구요
JS로 라우팅을 구현해본다던가, JS로 컴포넌트를 만들어본다던가 그런 것들을 안 해봐서
HTML 태그들을 리액트에서 사용해보게 되니까 많이들 HTML파일을 리액트에서 JS로 처리해서 보여주는 건가?하는 생각을 하는 것을 저는 몇몇 경우 볼 수 있었습니다. 이 경우, 이런 혼란을 해결하려면, 리액트가 어떤 식으로 DOM조작을 해내는지를 정확히 파악해야합니다.
JSX는 어떻게 브라우저에서 동작하는가?
많이들 들어봤을겁니다. JSX에 대해서..
JSX는 리액트에서 사용하는 특수한 문법입니다.
JSX라는 문법을 통해 JS파일 내부에서 HTML마크업 구조를 작성할 수 있는 것이죠.
JS파일 내부에서 HTML마크업 구조를 작성한다…. 생각해보면 말이 안 됩니다.
파일 확장자를 .html로 안 썼는데 어떻게 브라우저가 해석을 하는거지?와 같은 의문이 들 수 있을 겁니다.
분명 JSX 문법은 JS파일 안에 작성되었습니다. 그렇다면, 우리가 아는 JS문법들로 DOM을 조작하는 겁니다.
여기서 우리가 아는 DOM조작하는 JS문법들은
•
createElement
•
document.querySelector
•
document.getElementBy…
•
“”.appendChild
같은 문법들이죠? 이런 기본적인 문법들로 JSX문법을 해석해 HTML파일을 조작하는 겁니다. 그렇다면 우리는 분명 마크업 구조로 리턴하는데 이걸 해석해내는 걸까요? 중간 과정에 도구가 존재하는 겁니다. 바로 Babel이라는 트랜스파일러입니다.
길게는 안 적겠지만, 마크업 구조를 바벨에서 트랜스파일링을 통해React.createElement(tag-name, property-object, child-node) 형태로 바꿔줍니다.
이렇게 변형함으로써, 브라우저가 해석할 수 있게되고 리액트를 사용할 수 있게되어 DOM조작을 하는겁니다.
결론
리액트는 JS라이브러리입니다. 전부 우리가 아는 JS문법들을 통해서 데이터화시켜서 우리가 아는 DOM조작 문법들로 바벨을 통해 트랜스파일링하여 하나의 HTML파일에서 동적으로 화면을 그려내는 겁니다.