NextJS를 공부하기 앞서 공식문서를 읽고 있는 중인데 NextJS를 왜 써야하는가? 에 대한 물음에 React는 어떻게 동작하는가? 를 먼저 설명해주는 NextJS 공식문서에 박수를 보내고 싶다 👏.
총 9개의 섹션으로 이루어져있는데 하나씩 읽어보며 내 나름대로 다시 정리하려고 한다.
리액트가 어떻게 동작하는지 이해하려면 먼저 브라우저가 UI를 만들기 위해 나의 코드를 어떻게 인터프리트 하는지부터 이해해야한다고 한다.
웹 페이지에 접속하면 서버는 다음과 같은 HTML 파일을 건네주게 된다.
브라우저는 HTML을 읽고 DOM을 구축한다.
💡 DOM이 뭔데?
DOM은 HTML 요소의 객체 표현이다. DOM은 내 코드와 UI사이의 다리 역할을 하고 부모와 자식으로 이루어진 나무와 비슷한 구조를 띄게 된다.
자바스크립트 같은 언어를 이용해 DOM을 사용할 수 있는데 고르기, 추가하기, 업데이트하기, 삭제하기 같은 이벤트를 특정 UI 요소에 등록할 수 있다. DOM을 조종을 통해 특정 요소를 대상으로 지정할 수 있을 뿐 아니라 해당 스타일과 내부 컨텐츠 또한 변경이 가능하다.
index.html 파일에서 JS와 DOM 메소드들을 통해 UI를 업데이트 시켜보면 HTML과 DOM의 차이점을 확인할 수 있다.
원본 HTML에서는 <h1> 태그가 없지만 DOM에서는 존재한다. 왜냐하면 HTML은 초기 페이지 컨텐츠를 나타내고 DOM은 JS를 통해 업데이트된 페이지 컨텐츠를 나타내기 때문이다.
DOM을 업데이트 하는 행위 자체로는 충분히 매력적이지만 때로는 우리를 피곤하게한다. 위에서 단순 h1태그를 넣고 텍스트를 넣는데만 작성된 코드의 양을 보면 알 수 있다. 팀과 프로젝트가 커질때마다 이러한 방식으로 애플리케이션을 구축하는 것은 점점 더 어려워진다. 코드를 적게 작성하면서 동일한 효과를 낼 수 있다면 개발 능률을 더 높일 수 있지 않을까?
명령형 프로그래밍 vs 선언형 프로그래밍
JS를 이용해 DOM을 조작하는 위 코드는 명령형 프로그래밍의 아주 좋은 예시다. 하지만 이러한 방식은 개발 능률을 떨어뜨린다. 그렇다면 일일이 DOM 메소드를 작성하는것보다 우리가 자주 쓰는걸 미리 선언해놓고 쏙쏙 가져다 쓰는 선언형 방식이 더 능률에 좋지 않을까?
명령형 프로그래밍은 서브웨이처럼 요리사에게 피자 만드는 방법에 대한 단계별 지침을 제공하는 것과 같다.
선언적 프로그래밍은 피자스쿨처럼 피자를 만드는 데 걸리는 단계에 대해 걱정하지 않고 피자를 주문하는 것과 같다.
그리고 개발자들이 UI를 구축하는데 도움을 주는 가장 인기있는 선언형 라이브러리가 바로 우리가 지금 쓰고 있는 React다.
JSX란?
JSX는 HTML과 비슷한 문법으로 나의 UI를 설명할 수 있는 자바스크립트 전용 확장 문법이다. JSX의 세 가치 규칙만 알고 있으면 다른 것들을 추가로 배울 필요가 없다.
하지만 브라우저는 기본적으로 JSX 문법을 이해하지 못하기 때문에 JSX로 작성된 문법을 기본 JS로 변환할 수 있는 Babel 같은 컴파일러가 필요하다.
- 컴파일: 특정 언어를 다른 언어로 변환하는 행위.
