Redux? Flux architecture로부터 파생된 단방향성 전역적 상태 관리 도구 많은 경우 React와 함께 사용하나 React 없이도 사용 가능 Redux를 사용하는 이유 1. 전역적 상태 관리 2. 상태의 중앙화 및 높은 예측 가능성 3. 디버깅 툴의 편리성 useContext & useReducer 대신 사용하는 이유? - 생산성의 차이 - 결국 useContext, useReducer를 사용해서 Redux를 구현하게 된다. Redux의 원칙 1. Single source of truth: 유일한 store에서 전역적 state를 관리 2. State is read-only: state 직접 수정 금지. action과 dispatch를 통한 변경만 가능. (Immutability) 3. C..
여러 Component에서 state를 공유해야 하는 경우가 있다. 이럴 경우 해결법은 공유해야 하는 state 처리를 공통 부모에서 하는 것이다. 미리보는 결과 예시로 다음과 같은 간단한 예시를 구현한다고 해보자. 요구사항 'IncreaseValue' 버튼을 누르면 value 값이 증가해야 한다. 'DecreaseValue' 버튼을 누르면 value 값이 감소해야 한다. 그리고 'current value : '에 현재 값을 표시해야 한다. IncreaseValule, DecreaseValue, current value 모두 개별적인 Component로 만들어야 한다!! 핵심은 마지막 줄이다. value 값이 state가 되어 값이 바뀔때마다 re-render를 해줘야 하는데, 두 개의 버튼 컴포넌트에서..
# Route Groups URL path에 영향을 미치지 않으면서 다양한 이유로 폴더를 추가하고자 할 때 사용된다. 폴더명을 '(folderName)' 형식으로 괄호로 감싸서 생성하면 자동으로 적용된다 1. URL path에 영향 없이 route를 정리 관련된 항목끼리 폴더로 정리할 수 있다. 2. 각 그룹 별 layout.js 적용 ex. marketing 하위 항목에는 side bar가 적용되나 shop 하위 항목에는 적용되지 않는 경우, 이를 구현하기 위해 활용 가능 3. Multiple root layouts 각 그룹 별로 아예 별도의 root layout을 가져야 하는 경우 활용 가능. 이 때 각 그룹의 모든 root layout은 과 를 가져야 함을 명심하자. ※ Route Group 사용 ..
Next.js는 server-centric routing + client-side navigation 이다. sever-centric의 장점으로는 client가 route map을 필요로 하지 않으며, server는 server component로 route map을 대체할 수 있다는 것이다. 한편 client-side navigation은 SPA와 같은 동작을 가능케 하며, 새로운 route 접근 시 전체 페이지의 리로드 없이 URL 업데이트와 필요한 component의 re-render만 수행해 효율성을 가져갈 수 있고, client-side cache를 사용할 수 있다는 장점이 있다. # Link Component React component로 HTML element의 확장이다. route 간 cl..
# Pages and Layouts Next.js는 app routing convention에 정의된 이름을 가지는 파일들로 계층 구조를 형성한다. 그 중 가장 중요한 두 가지 요소는 page와 layout이다. page: 각 route에 unique해야하며 각 route subtree의 leaf이다. layout: 여러 페이지에 공유되며 navigation 시 layout의 state는 보존된다. root layout: 가장 윗단 layout, 즉 app 폴더 내 layout은 root layout이라 칭하며 항상 과 를 가져야 한다. Layout 컴포넌트는 Page 컴포넌트를 감싸고 있다. 실제로 app directory의 layout.tsx와 page.tsx를 다음과 같이 작성한 후 개발자 도구에서..
# Routing 라우팅은 request가 그것을 다루는 코드에 전송하는 메커니즘으로 정의된다. 즉, 네트워크 상에서 요청을 어떠한 경로로 보낼지 선택하는 프로세스이다. Next.js version 13부터는 React Server Components에 기반한 'App Router'를 사용하고 있다. 따라서 기본적으로 app directory 내부의 component는 React Server Component로 취급된다. (client component를 만들고자 할 때에는 'use client' 명령어를 사용해야 한다) Next.js에서 server component를 default로 사용하는 이유는 server infrastructure를 활용해 성능 향상을 도모할 수 있기 때문이다. 예를 들어 da..
