해당 글은 https://nextjs.org/ 공식 문서를 통해 학습한 내용입니다.
React에서 Next.js로 전환하는 과정에 대해서 알아보자.
다음은 Next.js로 전환하기 전 소스코드이다.
<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")
function Header({ title }) {
return <h1>{title ? title : "Default title"}</h1>
}
function HomePage() {
const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
const [likes, setLikes] = React.useState(0)
function handleClick() {
setLikes(likes + 1)
}
return (
<div>
<Header title="Develop. Preview. Ship. 🚀" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
)
}
ReactDOM.render(<HomePage />, app)
</script>
</body>
</html>
1. Next.js 전환하기
Next.js로 전환하면 unpkg.com에서 react와 react-dom 스크립트를 더이상 읽어오지 않아도 된다.
대신 Node Package Manager(NPM)을 통해 로컬에 패키지를 설치해야한다.
// package.json
{
"dependencies": {
"next": "^12.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
2. index.html 파일에서 다음 코드를 제거
- react 및 react-dom 스크립트 : 패키지가 로컬에 설치되기 때문에 스크립트에서 불러오지 않아도 됨
- babel 스크립트 및 <script type="text/jsx"> 태그 : Next.js에 JSX를 JavaScript로 변환하는 컴파일러가 내장되어 있음.
- <html> 및 <body> 태그 : Next.js가 해당 태그를 생성함
- app 엘리먼트 및 ReactDom.render() 메서드 : app 엘리먼트를 별도로 지정하지 않아도 되며, Next.js가 자동으로 렌더링 함
- React.useState(0) 함수의 React 부분 : Next.js에서 React 라이브러리에서 직접 import 하므로 별도로 표시하지 않아도 됨.
해당 코드를 삭제한 뒤 보완한 코드는 다음과 같고, 이는 jsx로 구성되어 있으므로 파일명을 html에서 js나 jsx로 변경해야한다.
// index.html
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
<div>
<Header title="Develop. Preview. Ship. 🚀" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
);
}
3. Next.js로 완전히 전환하기 위한 세가지 작업
- index.js 파일을 page라는 새 폴더로 이동
- React 구성 요소에 내보내기를 추가해 Next.js가 페이지의 기본 구성 요소로 렌더링 요소로 식별할 수 있도록 함
// ...
export default function HomePage() {
// ...
- Package.json에 다음 스크립트를 추가, 이는 Next.js 개발 서버로 동작함.
// package.json
{
"scripts": {
"dev": "next dev"
},
// "dependencies": {
// "next": "^11.1.0",
// "react": "^17.0.2",
// "react-dom": "^17.0.2"
// }
}
이상으로 React에서 Next.js로 변환하는 과정에 대해서 알아보았다. 다음 과정에서부터는 Next.js의 고급 기능에 대해 더욱 자세히 알아보도록 하자.
'Frontend > Next.js' 카테고리의 다른 글
| React 작동 방식 이해 (0) | 2023.04.23 |
|---|
