From React to Next.js

지금까지 우리는 React를 시작하는 방법을 살펴보았습니다. 이것이 최종 코드의 모습입니다. 여기에서 시작하는 경우 이 코드를 코드 편집기의 index.html 파일에 붙여넣으세요.

index.html

<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>
        )
      }
 
      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

지난 몇 장에서는 component, props, state라는 세 가지 필수 React 개념을 소개했습니다. 이에 대한 강력한 기반을 갖추면 React 애플리케이션 구축을 시작하는 데 도움이 됩니다.

React를 배울 때 가장 좋은 학습 방법은 빌드하는 것입니다. <script>를 사용하고 지금까지 배운 내용을 사용하여 기존 웹 사이트에 작은 구성 요소를 추가함으로써 점차적으로 React를 채택할 수 있습니다. 그러나 많은 개발자들은 React를 통해 전체 프런트엔드 애플리케이션을 직접 작성하고 작성할 수 있을 만큼 사용자 및 개발자 경험이 가치 있다는 것을 알았습니다.

From React to Next.js

React는 UI 구축에 탁월하지만 해당 UI를 완전히 작동하는 확장 가능한 애플리케이션으로 독립적으로 구축하려면 약간의 작업이 필요합니다. 프레임워크가 필요한 서버 및 클라이언트 구성 요소와 같은 최신 React 기능도 있습니다. 좋은 소식은 Next.js가 많은 설정과 구성을 처리하고 React 애플리케이션을 구축하는 데 도움이 되는 추가 기능이 있다는 것입니다.

다음으로 예제를 React에서 Next.js로 마이그레이션하고 Next.js의 작동 방식을 논의하며 서버 구성 요소와 클라이언트 구성 요소 간의 차이점을 소개합니다.