From React to Next.js

Next.js(ver.12)

From React to Next.js

ecoEarth 2023. 3. 14. 19:41

1. index.html 셋업

<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>

2. Next.js로 시작하기

react나 react-dom script 파일을 적어줄 필요없이 사용하는 폴더에 지역적으로 패키지를 설치해주면 된다.
우선, package.json파일에 빈 객체를 생성해준뒤 다음명령어를 통해 패키지를 설치한다.

npm install react react-dom next

패키지가 잘 설치되었다면 다음과 같은 내용이 명시되어있을 것이다. (버전이 업데이트되면 버전목록은 달라질 수 있다.)

// package.json
{
  "dependencies": {
    "next": "^13.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

그다음 index.html에서 다음과 같은 코드를 삭제해준뒤 코드명을 index.js 혹은 index.jsx로 변경한다.

The react and react-dom scripts since you’ve installed them with NPM.
The <html> and <body> tags because Next.js will create these for you.
The code that interacts with app element and ReactDom.render() method.
The Babel script because Next.js has a compiler that transforms JSX into valid JavaScript browsers can understand.
The <script type="text/jsx"> tag.
The React. part of the React.useState(0) function

그다음 inndex.jsx 코드상단에 다음코드를 추가하고, index.jsx를 pages폴더로 옮겨준다.

import { useState } from "react"

그렇다면 다음과 같은 코드가 되어있을 것이다.

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

다음은 next사에서 설명하는 next의 장점이다.

On the surface, this is a small reduction in lines of code, but it does help highlight something: React is a library that provides essential primitives for building modern interactive UI. But there is still some work involved to combine that UI you create into an application.
Looking at the migration, you may already be getting a sense of the benefits of using Next.js. You removed the babel script, a taste of the complex tooling configuration you no longer have to think about. You also saw Fast Refresh in action, just one of the many developer experience features you can expect with Next.js.