2023. 4. 16. 07:18ㆍNext.js/Foundations
1. Next.js 시작하기
지난 챕터에서 아주 기본적인 리액트 코드를 작성해봤다. 이제 해당 코드를 Next.js로 옮겨볼건데, 작성된 코드는 아래와 같고 만약 이전 챕터를 보지 않았더라도 아래 코드를 그냥 복붙해서 사용해도 된다.
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/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.1 Next.js 추가하기
프로젝트에 Next.js를 추가할 예정이므로 unpkg.com에서 끌어온 react와 react-dom 스크립트는 더이상 필요없다. 대신 npm으로 해당 패키지들을 로컬 환경에 설치해주자.
이 작업을 위해 package.json파일을 만들어 빈 객체 형태를 하나 만들어주자. 그 후 터미널에 npm run install react react-dom next을 입력하면 아래와 같이 의존성이 주입될 것이다.
// package.json
{
"dependencies": {
"next": "^12.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
그리고 node_modules라는 폴더가 새로 생긴걸 볼 수 있을텐데, 주입된 의존성과 관련된 실제 파일들이 담겨있는 폴더이다.
여하튼 다시 index.html로 돌아와서 이제 필요없는 코드를 쳐낼건데, 아래 작업들을 수행해보자.
- react, react-dom 스크립트 제거
- 태그 제거(Next.js가 자동으로 생성해줄 거임)
- app 앨리먼트와 ReactDom.render메서드 제거
- 바벨 스크립트 제거 (Next.js의 컴파일러가 JSX를 알아서 JS로 변환해줌)
- <script type="text/jsx" > 태그 제거
- 파일 형식을 index.html → index.js로 변경 (제거할거 다 쳐내고나면 남는게 JSX 코드밖에 없으므로)
- 파일 상단에 import { userState } from "react"; 넣어주기
그 다음 Next.js 애플리케이션으로 완전히 전환하기 위해 추가로 아래 작업을 해주자.
- pages라는 폴더를 만들어서 index.js파일을 넣어주기
- default export 표현식 추가하기 - Next.js가 어떤 페이지를 메인으로써 렌더링할지 알려주기 위해
- package.json에 스크립트 추가하기 - Next.js 개발용 서버 실행을 위해
// ...
export default function HomePage() {
// ...
// package.json
{
"scripts": {
"dev": "next dev"
}
}
// ... 중략
1.2 개발용 서버 띄우기
이제 코드가 제대로 돌아가는지 확인하기 위해 터미널에 npm run dev명령어를 실행한 후 브라우저창을 하나 띄워 localhost:3000으로 접속해보자.
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default 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>
);
}
그런 다음 코드를 약간만 바꿔서 세이브해보면 변경 사항이 자동으로 적용돼어 브라우저가 자동으로 업데이트될 것이다. 이 기능을 Fast Refresh라고 하는데, Next.js에 미리 구성된 기능이다.
여하튼 지금까지의 코드는 아래와 같은데, 겉보기엔 그닥 변화가 없어보일 수 있다. 그러나 마이그레이션의 결과로
- 바벨같은 복잡한 툴을 생각할 필요가 없어졌고
- Fast Refresh를 통한 좋은 개발자 경험을 얻을 수 있었다
추가적으로 코드가 좀 줄긴 했으나 어찌됐건 리액트라는 라이브러리를 기반으로 모던 인터랙티브 UI를 만들 수 있었다. 물론, 이 UI를 애플리케이션에 완전히 결합하려면 몇 가지 작업이 더 필요하긴 하지만 말이다.
2. Next Steps
지금까지 리액트와 Next.js의 기본적인 사항들에 대해 알아보았다. 그리고 간단한 리액트 앱을 Next.js로 마이그레이션도 해봤는데, 이제 좀더 깊은 단계로 나아갈 차례이다. 각자 필요한 내용에 맞춰 선택해보자.
- Next.js로 직접 앱을 만들면서 배우기(링크)
- Next.js의 주요 기능 소개 및 보다 복잡한 프로젝트 빌드해볼 예정 - Next.js의 작동 방식에 대해 더 자세히 알아보기
'Next.js > Foundations' 카테고리의 다른 글
| [Foundation] How Next.js Works (0) | 2023.04.18 |
|---|---|
| [Foundation] From JS to React (0) | 2023.04.15 |
| [Foundation] Next.js란? (0) | 2023.04.15 |