NextJS를 처음 배우면서 공식 홈페이지에 있는 내용을 따라하며 정리하려고 하며
당해 포스트는 그 첫 시작이며, React가 Dom을 어떻게 다루는지에 대해 주요하게 다루려고 한다.
Getting Start with React
리액트를 project에 도입하기 위해서는 unpkg.com 이라는 곳에서 2가지 스크립트(react, readt-dom)를 로드 해줘야 한다.
- react: React library의 코어
- react-dom: React를 이용하여 DOM을 컨트롤 할 수 있는 DOM methods를 제공해준다.
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>
만약, 우리가 JavaScript만을 이용하여 h1태그를 div태그 안에 넣으려고 했다면, 아래와 같이 긴 코드가 필요했겠지만
const header = document.createElement('h1');
const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
header.appendChild(headerContent);
app.appendChild(header);
React를 이용하여 DOM을 관리한다면 아래처럼 1줄의 코드로 간단히 구현 할 수 있다.
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>하나씩 직접 어떻게 DOM을 작동시킬지 적는 방식이 아니라,
'react-dom' library 내의 ReactDOM.render() 메소드를 이용하여, React에게 <h1>태그를 app안에 넣어 달라고 얘기해줄 수 있다.
FYI,
위와같이 step-by-step으로 어떤 식으로 DOM을 controll 할 것인지 정하는 방식을 imperative-programming(명령형 프로그래밍), 하나씩 단계를 설명하는 것이 아니라 "h1태그 추가해줘" 와 같은 방식을 declarative-programming(선언형 프로그래밍)이라고 한다.
NextJS에서는 명령형과 선언형 프로그래밍을 피자를 만드는 과정을 예시로 들어 다음과 같이 설명 하고 있다.
- 명령형 프로그래밍: 도우 반죽하고 -> 도우를 핀 다음 -> 토마토 소스 추가 -> 파인애플추가 -> ... -> 200도 오븐에서 구워
- 선언형 프로그래밍: 파인애플 피자 주세요
Encounter unexpected Error
하지만, 위 코드를 그대로 실행 하면, 다음과 같은 에러가 발생하는 것을 볼 수 있다.
왜 이런 에러가 발생한 것 일까?
이유는 간단하다. 우리가 ReactDom메소드를 이용해 넣으려고 했던 '<'h1>...</h1>' 은 JS 문법이 아니라, JSX이기 때문이다.
Brower는 아무것도 없이 바로 JSX를 이해할 수 없으므로, barbel과 같은 JS complier(from JSX to JS )가 필요하다.
즉, React는 JavaScript로 컴파일이 필요한 JSX를 사용하는데, 우리는 아직 complier가 없었다는 뜻이다.
해결 방법?
이미 위에서 언급 한 것처럼, JS complier인 barbel을 붙여주면 된다.
그리고, barbel에게 어떤 언어를 변환시켜야 되는지 알려주기 위해 script의 type을 아래처럼 "type=text/jsx" 으로 수정해주면 정상적으로 작동 하는 것을 볼 수 있다.
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>
FYI,
What is JSX?
JSX는 HTML과 유사한 문법으로 UI를 설명할 수 있도록 도와주는 JS의 syntax extension이다.
JSX의 가장 좋은 점은 세가지 법칙만 지킨다면, JS와 HTML이외의 새로운 문법이나 언어를 배울 필요가 전혀 없다는 점이다.
여기까지, 명령형 프로그래밍 방식을 가지고 있는 JS 방식에서, 선언형 프로그래밍 방식인 React가 어떻게 DOM을 관리하는지 알아봤다.
다음 글에서는 React의 Core Concept과 해당 코어컨셉들을 React는 어떻게 이용하고 있는지 알아보자.
'NextJS' 카테고리의 다른 글
| [NextJS - 6] Rendering ( Next.js의 꽃, pre-rendering ) (0) | 2022.08.30 |
|---|---|
| [NextJS - 5] How Next.js works? (1) | 2022.08.29 |
| [NextJS - 4] Next.js 패키지 설치 및 Fast Refresh (1) | 2022.08.29 |
| [NextJS - 3] React - Adding Interactivity With State (1) | 2022.08.29 |
| [NextJS - 2] React의 Core Concepts(Components, Props, State) (0) | 2022.08.29 |
