전체 글

Next.js 리액트 서버 컴포넌트

✔️ 기존 SSR의 한계 및 Next.js 서버 컴포넌트의 개념에 대해서 살펴보자 React Server Component는 리액트 18 버전에서 도입이 되었다. 기존의 서버 사이드 렌더링과는 완전히 다른 개념이다. 기존 리액트 컴포넌트와 SSR의 한계 기존의 React 컴포넌트는 클라이언트에서 작성이 되고 브라우저에서 자바스크립트 코드에 대한 처리가 이루어지게 된다. 그래서 React로 만들어진 페이지는 유저가 웹사이트를 방문했을 때 React 실행에 필요한 코드를 먼저 다운로드 받고 React 컴포넌트 트리를 브라우저에서 만들어주게 된다. React 컴포넌트 트리를 바탕으로 DOM에서 렌더링을 진행하게 된다. 기존의 이런 클라이언트 사이드 렌더링 방식에서 여러 가지 한계들이나 성능상의 이슈들을 마주했..

Next.js App Router

✔️ Next.js 앱 라우터의 개념과 Page, Layout에 대해서 살펴보자 Next 12 버전까지는 페이지 라우터 방식이 기본 방식으로 잘 사용되어 왔다. 기존의 페이지 라우터 방식을 잘 사용하고 있었는데 왜 13 버전부터는 앱 라우터라는 새로운 라우터 방식이 나왔을까? Page Router 방식의 한계모든 페이지에 들어가는 컴포넌트를 Next.js 페이지 라우터 방식으로 구현을 하기 위해서는 어떻게 해야 할까?각각의 페이지 컴포넌트에 를 일일이 넣는다 (권장하지 않는다)_app, _document 같은 파일에 를 넣는다이전에 살펴본 _app, _document의 목적_app : 페이지를 초기화하기 위한 용도로 사용페이지 변경 시 유지하고 싶은 레이아웃페이지간 추가적인 데이터 삽입global CS..

Next.js 프레임워크 라우팅 구조와 데이터 패칭

✔️ Next.js 프레임워크의 라우팅 구조와 데이터 패칭에 대해 살펴보자 페이지 라우트 구조페이지 라우터 구조는 pages라는 디렉토리 하위의 경로에 따라서 라우터 구조를 자동으로 가져가고 있다. Next.js를 템플릿을 사용해서 프로젝트를 시작을 하면 pages라는 디렉토리가 기본으로 만들어지게 된다. 해당 디렉토리 하위에 폴더도 만들 수 있고 파일도 만들 수 있다./pages/index.tsx : 웹 사이트의 루트(localhost:3000)/pages/hello.tsx : 경로는 /hello 로 접근할 수 있다(localhost:3000/hello)/pages/hello/[id].tsx : 대괄호 [] 는 여기에 어떠한 문자도 올 수 있음을 의미한다/pages/hello/123/pages/hell..

Next.js 프레임워크

✔️ Next.js 프레임워크가 무엇이고 동작 원리 및 페이지 역할에 대해 살펴보자 Next.js란?https://nextjs.org/Vercel에서 만든 풀 스택 웹 어플리케이션 구축 프레임워크페이스북 팀에서 만든 react-page라는 리액트 기반 서버 사이드 렌더링 프로젝트 → 여기서 영감을 받음라이브러리가 아니다서버 사이드 렌더링의 원리(스텝)해당 페이지에서 필요한 모든 데이터가 서버로 fetch된다 (A)서버는 이 HTML을 렌더링을 한다 (B)B에서 만든 HTML과 CSS, JavaSCript가 클라이언트로 보내지게 된다 (C)인터랙션이 없는 UI가 HTML과 CSS에 의해서 보여지게 된다마지막으로, React는 Hydration이라는 과정을 통해서 인터랙션을 브라우저 화면에서 적용을 시켜준다..

Suspense

✔️ React 18에서 추가된 Suspense에 대해 살펴보자 Suspense란?fallback 컴포넌트를 로딩이 끝날 때 까지 보여주는 기능이다.사실 Suspense는 React 16.6 버전에서 실험적으로 도입된 기능이었다.기존의 한계Next.js에서 사용할 수 없었다. → (React 18) Next.js에서도 사용할 수 있게 되었다.컴포넌트가 마운트가 되기 전에 effect가 실행되는 문제가 발생했다. → (React 18) 컴포넌트가 화면에 실제로 노출될 때 effect가 실행된다.이전에는 컴포넌트가 스스로 Suspense에 의해 보여지고 있는지 없는지 알 방법이 없었다. → (React 18) Suspense로 인해 컴포넌트가 보이거나 사라질 때도 effect가 정상적으로 실행이 되는 방식으..

자동 배치(Automatic Batching)

✔️ React 18에서 추가된 자동 배치(Automatic Batching)에 대해 살펴보자 리액트에서 항상 관심을 가지는 있는 주제는 바로 상태를 어떻게 업데이트 할 것인가 이다. useTransition이나 useDeferredValue 같은 훅들도 어떻게 하면 상태를 잘 업데이트할 수 있을까에 대한 고민에서 나온 기능이라고 볼 수 있다. 리액트 컴포넌트에서는 하나의 상태만 가지고 있기 보다는 두 개 이상의 상태를 가지고 있는 경우가 훨씬 더 많다. 이러한 경우 상태가 하나씩 업데이트가 될 때마다 컴포넌트는 리렌더링을 수행하게 된다. React 트리가 깊고 복잡해질수록 다루는 상태가 많아지게 되고 리렌더링 횟수가 기하급수적으로 늘어나게 되는 문제가 발생한다. 이러한 문제를 해결하기 위해서 나온 기능..