프로젝트를 진행하면서 기존에 작업중이었던 Next12 기반의 앱을
13버전으로 마이그레이션 하는 일이 있었는데요!
기존의 폴더 구조와 많이 달라진 탓에
기존 디자인 패턴을 걷어내고 새로운 구조를 도입하는 것을 고려하다보니
Co-Location 이라는 개념이 들어오게 되었어요!
오늘은 이 부분을 공유해볼까 합니다.
App directory?
Nextjs 13버전에서 제시한 새로운 구조인 appRouter을 사용하기 위한 directory이며,
docs에 따르면 next.js의 라우팅 및 레이아웃 경험을 개선하고 디렉토리 도입과 함께
React의 미래에 맞추어 조정하는 과정에서의 app레이아웃 후속조치라고 합니다.
app 디렉토리는 아래와 같은 지원을 포함하게 됩니다
- 레이아웃 : 상태를 유지하고 비용이 많이 드는 재렌더링을 피하면서 경로 간에 UI를 쉽게 공유합니다.
- 서버 구성요소 : 서버 우선을 가장 동적인 애플리케이션의 기본값으로 만듭니다.
- 스트리밍 : 즉시 로드 상태를 표시하고 렌더링되는 UI 단위로 스트리밍합니다.
- 데이터 가져오기 지원 : async 서버 구성 요소 및 확장fetchAPI를 통해 구성 요소 수준 가져오기가 가능합니다.
기존 버전과의 차이점
기존에 사용하던 구조는 아래의 사진과 같습니다.
새로 도입된 구조는 아래와 같습니다.
살펴보면 위의 구조에서는 page와 src등의 폴더로 구성이 되어있지만
아래의 구조에서는 app 이라는 폴더 내부에서 몽땅 만들어진걸 보실 수 있습니다.
기존의 pages폴더는 app dir 내부에 (page) 라는 폴더로 만들어 주었고
src내부에 만들던 컴포넌트는 components라는 폴더를 만들어 관리 할 수 있게 되었습니다.
이렇게 되면 고려 할 수 있는 내용 중 한가지가 Co-Location 인데요!
Colocation?
사전을 찾아 보자면 "단일 위치 내에 여러 엔티티를 배치하는 행위이다." 라고 쓰여 있습니다.
예시로 "조직에서 관련 역할이나 그룹을 단일 방, 건물 또는 캠퍼스에 배치하는 것을 말한다."라고
적혀있기도 합니다.
그렇다면 우리는 어떻게 관리를 하면 좋을까요?
기능 또는 도메인에 따라 관련된 컴포넌트와 훅, 유틸등을 같이 통합적으로 관리하면 좋겠습니다.
next.js 에서도 Colocation 과 관련된 구조를 제시해주었습니다.
위의 사진을 보면 앱의 하위 폴더로 components, lib, dashboard 폴더를 생성하였는데
자세히 보면 dashboard폴더 내부에도 components, lib폴더가 있는 것을 볼 수 있습니다.
Colocation을 활용하여 공용으로 사용되는 컴포넌트와 라이브러리는 app의 하위로
dashboard에 사용되는 컴포넌트와 라이브러리는 dashboard의 하위로 관리하는 것을 볼 수 있습니다.
이렇게 사용하게 되면 리소스가 분산되지 않아 리소스 관리적인 측면에서
많은 이점을 가져올수 있지 않을까 하는 생각이 드는데요..
한편으로는 프로젝트의 규모가 커지게 된다면 공용으로 사용되는 내용과
특정 기능 또는 도메인에 사용되는 내용을 구분하고 관리하는 측면에서
오히려 인적 리소스의 소요가 더 많지 않을까 하는 생각도 하게 되는것 같습니다.
이부분은 적용 해보고 좀더 사용해보면서 내용을 추가하도록 하겠습니다.
'DEV > React, Next' 카테고리의 다른 글
| [Next] 정적 라우팅과 동적 라우팅 (0) | 2023.03.07 |
|---|---|
| [React/Next] NextJS의 장점 (0) | 2023.02.27 |
| [Next] next/legacy/image 사용해보기 (1) | 2023.02.27 |
| [React] JSX는 무엇일까? (0) | 2023.02.13 |
| [React] 라이프 사이클(클래스형) (0) | 2023.02.13 |
