[Next.js] 입문

npx create-next-app@latest --typescript

library는 개발자로서 내가 사용하는 것이다.  library를 불러와서 library를 사용해서 무언가를 한다. 그런데 framework는 내 코드를 불러오는 것이다. framework는 코드를 적절한 위치에 잘 적기만 한다면 너의 코드를 불러와서 모든 걸 동작하게 할 것이다. 

library를 사용할때는 내가 원하는대로 코드를 작성할 수 있고, 사용하고 싶을 때 사용할 수 있다. 

리액트 같은 경우는 내가 원하는대로 routing을 다룰 수 있고, 파일명을 정할 수도 있다. 라이브러리는 내가 원할 때 언제든 어떤방법으로든 부르면 된다. 

프레임워크에선 특정한 규칙을 따라서 특정한 것을 해야 한다. 

우리가 그것들을 따랐을 때 모든 게 정상적으로 잘 동작한다.

 

pages 폴더 안의 파일 이름으로 url이 만들어진다. 

//jsx를 쓰기 위해 파일 확장자를 jsx로 할 필요도, react를 import할 필요도 없다.
//만약 useState나 useEffect와 같은 react method를 쓰고 싶으면 그런 경어 react.js를 import 해야 한다. 


//이 컴포넌트 이름은 파일명과 달라도 된다. 
export default function Home() {
  return (
    <div>
      <h1>HEllo</h1>
    </div>
  );
}

 

next.js의 가장 좋은 기능 중 하나는 앱에 있는 페이지들이 미리 렌더링 된다는 것이다. 

CRA와 next.js의 큰 차이점은 CRA는 client side rendering이라는 것. 내 브라우저가 유저가 보는 UI를 만드는 모든 것을 한다는 것을 의미한다. 브라우저가 자바스크립트를 가져와서 client-side 자바스크립트가 모든 UI 를 만드는 것. 

 

nextJS는 페이지가 미리 만들어져서 자동으로 렌더링된 초기상태의 컴포넌트가 된다.