본문 바로가기
Dev/Next JS

[공식문서] React에서 Next.js로 #2

by ZEROGOON 2023. 8. 11.

Next.js 시작하기

프로젝트에서 Next.js를 추가하려면 이제 더 이상 unpkg.com에서 react와 react-dom 스크립트를 로드할 필요가 없습니다. 대신 Node Package Manager(npm)를 사용하여 이러한 패키지를 로컬로 설치할 수 있습니다.

참고 : 먼저 Node.js가 설치되어 있어야 합니다(최소 버전 요구사항). Node.js는 여기서 다운로드 할 수 있습니다.

 

그렇게 하려면 package.json 이라는 빈 객체 {} 를 가진 새 파일을 생성하세요.

// package.json
{
}

 

터미널에서 npm install react react-dom next 명령을 실행하세요. 설치가 완료되면 package.json 파일 내에 프로젝트 종속성이 나열되어 있는 것을 확인할 수 있습니다.

// package.json
{
  "dependencies": {
    "next": "^12.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

 

또한 실제 종속성 파일을 포함하는 node_modules 라는 새 폴더가 있는 것을 볼 수 있습니다.

 

index.html 파일로 돌아와서 다음 코드를 삭제할 수 있습니다.

  1. NPM으로 설치했기 때문에 react와 react-dom 스크립트
  2. Next.js가 이를 대신 생성하므로 <html> 및 <body> 태그
  3. app 요소와 ReactDom.render() 메서드와 상호 작용하는 코드
  4. JSX 코드를 유효한 JavaScript로 변환하는 컴파일러인 Babel 스크립트
  5. <script type="text/jsx"> 태그
  6. React.useState(0) 함수의 React. 부분

위 줄을 삭제한 후, 파일의 상단에 import { useState } from "react" 를 추가하세요. 코드는 다음과 같아야 합니다.

// 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>
  );
}

 

HTML 파일에 남아 있는 코드는 이제 JSX 코드뿐이므로 파일 유형을 .js 또는 .jsx로 변경할 수 있습니다.

 

이제 Next.js 앱으로 완전히 전환하려면 세 가지 더 해야 할 사항이 있습니다.

  1. index.js 파일을 pages라는 새 폴더로 이동하세요(나중에 더 자세히 설명합니다).
  2. 주요 React 컴포넌트에 기본 내보내기(default export)를 추가하여 Next.js가 어떤 컴포넌트를 이 페이지의 주요 컴포넌트로 렌더링할지 구별할 수 있도록 도와주세요.
// ...
   export default function HomePage() {
   //  ...

    3. 개발 중인 동안 Next.js 개발 서버를 실행하기 위한 스크립트를 package.json 파일에 추가하세요.

// package.json
   {
    "scripts": {
        "dev": "next dev"
    },
     // "dependencies": {
     //   "next": "^11.1.0",
     //   "react": "^17.0.2",
     //   "react-dom": "^17.0.2"
     // }
   }

 

개발 서버 실행하기

모든 것이 잘 작동하는지 확인하려면 터미널에서 npm run dev 명령을 실행하고 브라우저에서 localhost:3000으로 이동하세요. 그런 다음 코드를 약간 변경하고 저장하세요.

 

파일을 저장하면 브라우저가 자동으로 변경 사항을 반영하는 것을 확인할 수 있을 것입니다.

 

이 기능은 Fast Refresh 라고 합니다. 이를 통해  수행한 모든 편집에 대한 즉각적인 피드백을 제공하며 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>

... 다음과 같이 변경되었습니다.

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>
  );
}

 

표면적으로는 코드 줄 수가 줄어들었지만, 이것은 무엇을 강조하고 있을까요? React는 현대적인 대화형 UI를 구축하기 위한 필수적인 기본 요소를 제공하는 라이브러리입니다. 그러나 여전히 해당 UI를 애플리케이션으로 결합하는 데 일부 작업이 필요합니다.

 

이 마이그레이션을 살펴보면 Next.js를 사용하는 장점에 대한 감을 이미 느끼고 있을 것입니다. Babel 스크립트를 제거했으며, 더 이상 고려해야 할 복잡한 도구 구성의 한 부분을 제거한 것입니다. 또한 Fast Refresh 가 작동하는 것을 보았는데, 이것은 Next.js에서 기대할 수 있는 많은 개발자 경험 기능 중 하나입니다.

저작자표시 비영리 변경금지

'Dev > Next JS' 카테고리의 다른 글

[공식문서] Next.js의 작동 방식 #1  (0) 2023.08.11
[공식문서] React에서 Next.js로 #3  (0) 2023.08.11
[공식문서] React에서 Next.js로 #1  (0) 2023.08.11
[공식문서] JavaScript에서 React로 #9  (0) 2023.08.11
[공식문서] JavaScript에서 React로 #8  (0) 2023.08.11

관련글

티스토리툴바