컴포넌트에 대한 고찰(1) - 컴포넌트 분리하기

B Y·2022년 10월 16일

컴포넌트에 대한 고찰(0) - Intro
컴포넌트에 대한 고찰(1) - 컴포넌트 분리하기 (현재글)
컴포넌트에 대한 고찰(2) - jsx 가독성 높이기
컴포넌트에 대한 고찰(3) - 안전하게 스타일 적용하기
컴포넌트에 대한 고찰(4) - data와 ui 분리하기

결론

관련 있는 컴포넌트들을 모아놓자.
공통 컴포넌트는 UI라이브러리를 만든다는 생각으로 작성하자(도메인 제거).
도메인이 겹치고 + 페이지간에 재사용되는 컴포넌트는 외부로 분리한다.
복잡한 추상화보다는 반복이 낫다.
적당히 나누자. 완벽히 나누게 되면 마음은 편하지만 코드를 찾아가는 경로가 길어지고 점점 context를 잃게 된다.

관련 있는 컴포넌트들을 모아놓자

page 파일 안에 하위 컴포넌트 배치하기

pages안에 각 page를 넣습니다.

그리고 해당 페이지에서 사용되는 컴포넌트들은 페이지 파일 아래쪽에 배치합니다.

const DetailPage = () => { ... };

export default DetailPage;

const Loading = () => { ... };
const Error = () => { ... };
const Main = () => { ... };
const Sidebar = () => { ... };
const FloatButton = () => { ... };

이렇게 아래쪽에 배치하면 세가지 장점이 있습니다.

부모 컴포넌트로 빠르게 돌아올 수 있습니다

컴포넌트를 세세하게 파일별로 분리하면 VSC에서 부모컴포넌트 -> 하위 컴포넌트로 가는건 한번에 갈 수 있지만(ctrl + 우클릭), 다시 부모 컴포넌트로 오는건 개발자가 폴더 구조를 보고 찾아서 와야하기 때문에 번거롭습니다.

아래쪽에 두게되면 해당 컴포넌트를 찾을때는 ctrl + 우클릭으로 한번에 가고, 돌아올때는 스크롤로 오면 되기 때문에 더 편합니다.

소속을 확실히 할 수 있습니다

세세하게 파일별로 나누면 이 컴포넌트가 어디에서 사용되는지 확실히 알기 어렵습니다. export를 하게 되니 컴포넌트 끼리 서로 import 할 수도 있고, 다른 페이지에서도 import 할 수 있게됩니다.

DetailPage.tsx 파일 아래쪽에 컴포넌트를 배치하면 Error / FloatButton / Loading / Main 컴포넌트가 DetailPage에서만 사용됨이 보장됩니다.

const DetailPage = () => { ... };

export default DetailPage;

// 아래 컴포넌트들은 현재 파일에서만 사용됨이 보장됩니다
const Loading = () => { ... };
const Error = () => { ... };
const Main = () => { ... };
const Sidebar = () => { ... };
const FloatButton = () => { ... };

폴더 구조가 단순해집니다

지금은 얼마 없지만 DetailPage안에 이런 저런 컴포넌트가 많아지고 이것들을 전부 다른 파일로 분리하면 폴더 구조가 너무 길어집니다.

반면, DetailPage.tsx아래에 두게 되면 폴더 길이가 짧아집니다.

문제점

하지만! 이런 방식은 파일이 뚱뚱해지는 문제점이 있습니다.

위처럼 할경우 해당 페이지의 컴포넌트가 많아지면 아래쪽이 너무 늘어나서 컴포넌트간의 구분이 어려워 지고 가독성이 떨어집니다. 네이밍 충돌도 빈번하게 일어날 수 있습니다.

그래서 우선 아래쪽에 구현을 하고, 때가 되면 파일로 분리하는 것이 좋다고 생각합니다.

대표적으로,

컴포넌트가 복잡하고 무거울때
스토리북에 표현해야할 필요가 있을때
테스트가 필요한 컴포넌트일때

위 세가지 경우에 컴포넌트를 아래쪽이 아닌 같은 디렉토리의 독립적인 폴더에 두는것이 좋다고 생각합니다.

DetailPage.tsx에서 끌어 올린 독립 컴포넌트들

이후에 page 컴포넌트 아래쪽에는 다음과 같은 컴포넌트들이 남습니다.

가벼운 컴포넌트들
- Error
- Loading
- AddButton
- PageTitle
Layout관련 컴포넌트들
- Main
- Sidebar
- Footer

결과적으로 페이지 안에서 컴포넌트의 분리는 획일적인 방식 보다는 적당히 개발자가 덜 피곤한 방향으로 선택하는것이 좋다고 생각합니다.

page내부에서 분리된 컴포넌트

page내부에서 분리된 컴포넌트들도 마찬가지로 가급적 같은 파일의 아래쪽에 하위 컴포넌트들을 배치합니다.

const StudyMemberSection = () => { ... };
export default StudyMemberSection;

const Self = () => { ... };

const StudyMemberCount = () => { ... };
const StudyMemberList = () => { ... };
const NoStudyMember = () => { ... };
const StudyMemberListItem = () => { ... };
const StudyOwnerCardLink = () => { ... };
const StudyMemberCardLink = () => { ... };
const MoreButton = () => { ... };