개념 정리본격적으로 렌더링에 대해서 보기 전에 렌더링과 관련된 리액트 패키지 4가지를 먼저 살펴보겠습니다. 패키지 구조React리액트 코어 패키지는 컴포넌트를 정의하는 역할만 합니다. 그리고 다른 패키지에 의존성이 없어서 다양한 플랫폼에 올려서 사용이 가능합니다. 그래서 화면을 그리는 패키지가 따로 있는데 그게 바로 렌더러 패키지 입니다.Renderer렌더러는 저희한테 익숙한 리액트-돔과 모바일에서 사용하는 네이티브 렌더러 등이 있고 호스트 렌더링 환경, 그러니까 플랫폼에 의존적입니다. 이렇게 렌더러가 다양하기 때문에 리액트가 그려질 수 있는 플랫폼 환경이 다양합니다. 즉 렌더러의 역할은 브라우저나 모바일 같은 호스트와 리액트를 연결하는 그런 역할을 합니다.Scheduler스케줄러는 이름 그대로 스케줄링..

v13 컴포넌트 수준에서 렌더링 환경을 선택 💡 next 13 이전에는 페이지에 필요한 모든 JS 코드를 하이드레이션 했지만 서버 컴포넌트가 도입된 후에는 클라이언트 컴포넌트만 하이드레이션 하면 된다. → JS 번들의 사이즈가 줄어든다. 📌 클라이언트 컴포넌트 클라이언트 컴포넌트를 사용하면 애플리케이션에 클라이언트 측 인터랙션을 추가할 수 있다. 서버에서 미리 렌더링 되고 클라이언트에서 hydrated 된다. 클라이언트 컴포넌트는 기존의 페이지 라우터의 컴포넌트가 항상 작동하던 방식이다. 작동방식 next.js가 빌드 중에 컴포넌트를 하나씩 확인하다가 클라이언트 컴포넌트를 만남 정적으로 만들 수 있는 부분을 확인 → 정적 HTML 프리렌더링 빌드 시에 클라이언트 컴포넌트도 프리렌더링 되기 때문에 내부의 ..