[Next.js Learn] From React to Next.js(2) - Getting Started with Next.js

0

Next.js Learn

목록 보기
13/50

Next.js로 시작하기(Getting Started with Next.js)

Next.js로 프로젝트를 시작하려면 더 이상 unpkg.com에서 reactreact-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으로 이미 설치했으므로 reactreact-dom 스크립트를 삭제합니다.
  2. Next.js가 이를 대신 생성할 것이므로 <html><body> 태그를 삭제합니다.
  3. app 요소와 ReactDom.render() 메서드와 상호작용하는 코드를 삭제합니다.
  4. Next.js에는 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이므로 파일 형식을 .html에서 .js 또는 .jsx로 변경할 수 있습니다.

이제 Next.js 앱으로 완전히 전환하기 위해 해야 할 작업이 세 가지 더 있습니다:

  1. index.js 파일을 pages라는 새 폴더로 이동시킵니다. (이에 대한 자세한 내용은 이후에 다룰 것입니다.)
  2. 주요 React 컴포넌트에 default export를 추가하여 Next.js가 이 페이지의 주요 컴포넌트로 어떤 컴포넌트를 렌더링해야 하는지 구분할 수 있도록 합니다.
// ...
export default function HomePage() {
//  ...
  1. 개발 중에 Next.js 개발 서버를 실행하기 위해 package.json 파일에 스크립트를 추가하세요.
 // package.json
   {
    "scripts": {
        "dev": "next dev"
    },
     // "dependencies": {
     //   "next": "^11.1.0",
     //   "react": "^17.0.2",
     //   "react-dom": "^17.0.2"
     // }
   }

개발 서버 실행하기(Running the development server)

모든 것이 정상적으로 작동하는지 확인하기 위해 터미널에서 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에서 기대할 수 있는 많은 개발자 경험 기능 중 하나입니다.


출처: https://nextjs.org/learn/foundations/from-react-to-nextjs/getting-started-with-nextjs

profile
지치지 않는 백엔드 개발자 김성주입니다 :)

0개의 댓글