처음 리액트에서 작업을 시작했을 때 컴포넌트 분리하는 기준을 정확히 몰라서 일단 한 페이지에 만들어놓고 분리를 진행했었다.

공통 컴포넌트를 만들때는 로직 스타일 철저히 분리하고 퓨어하게 마크업만 있는 컴포넌트를 쓰는게 좋다.

위에 말을 공감하는게 이번 프로젝트를 진행하면서 분리를 안했다가 랜더링에 문제가 있었던 적이 있었다. 타이머 로직을 만들어야 했었는데 타이머 hooks이 들어가는 컴포넌트를 개별적으로 분리를 안 했다가 초수마다 리랜더링이 되어버리는 이슈를 나중에 알아버린 것😅
이 김에 컴포넌트를 분리하는 방법을 문서화 시켜볼까 한다.

👩🏻‍💻 컴포넌트 분리하기

1. 단일 책임 원칙 (Single Responibility Principle)을 지키기
각 컴포넌트는 하나의 기능에만 집중하도록 설계해야 한다. 여러 기능을 수행하거나 여러 역할을 가지고 있으면 안된다. 그래야 유지보수하기 쉽고 재사용성이 높아진다.

2. 컴포넌트의 종류를 구분하기
컴포넌트는 상태를 가지는 컴포넌트와 상태를 가지지 않는 컴포넌트로 나뉜다. 상태를 가지는 컴포넌트는 state를 관리하므로 비즈니스 로직과 상태 업데이트 코드를 포함한다.
공식 문서를 참고해보면 컴포넌트의 개념은 아래와 같다.

• 어떠한 시스템을 구성하는 요소 중 하나의 단위이다.
• 공통되는 부분을 모듈화 하여 재사용할 수 있는 단위이다.
• 데이터를 뿌리기 위한 UI 요소이다.
• 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리해야 한다.

📌 역할과 책임 분리

1. 외부로부터 주입 된 데이터를 관리한다.
   • api요청으로 응답 된 데이터나 부모 컴포넌트로 부터 주입받은 데이터를 관리한다.
2. 데이터를 UI로 표현한다.
   • React는 데이터 중심으로 돌아가기에 컴포넌트에서 데이터를 어떻게 UI로 보여줄지 선언적으로 작성한다.
3. 사용자로부터 인터랙션을 받는다.
   • 이벤트 핸들러에 사용자의 인터렉션이 발생했을 때 어떠한 동작을 할지 명시해줄 수 있고, 이는 데이터를 조작하는 경우도 있다.

단일 책임 원칙과 컴포넌트의 종류를 구분하여 분리하면 유지보수성이 높은 리액트 애플리케이션을 작성할 수 있다.

✅ 좋았던 내용

내부 구현을 캡슐화

의존 관계가 생성되면 변경의 파장이 의존 방향에 따라 영향을 미치게 된다. 우리가 만든 FlexListItem 컴포넌트를 살펴보자.

이 컴포넌트는 내부의 li 엘리먼트 스타일이 flex 로 구현되어서 Flex-*라는 네이밍이 되었다. 컴포넌트 네이밍 또한 인터페이스이기 때문에 외부와의 의존성을 만들게 된다. 내부 구현이 외부로 노출되면서 내부 구현과 외부와의 의존성이 생긴 것이다.

한 가지 상활을 예로 들어보면 FlexListItem 내부 구현이 flex 스타일이 아닌 grid로 변경되었을 때, 더 이상 이 컴포넌트는 Flex로 구현되어있지 않기 때문에 네이밍이 변경될 것이다. 그리고 이 변경은 이 컴포넌트를 사용하고 있는 모든 곳에서 영향을 미치게 된다.

이 컴포넌트의 이름만 FlexListItem에서 ListItem 으로 수정하면 내부의 어떤 스타일을 수정하더라도 사용하는 쪽에 영향을 미치지 않게 된다. 내부 구현을 감췄으니 내부 구현과 이를 사용하는 외부와의 의존성이 사라졌고 내부 변경이 외부에 영향을 미치지 않는 것이다.

구현을 캡슐화하여 내부의 변경이 외부에 영향을 미치지 않도록 해야 한다.

https://code.tutsplus.com/stateful-vs-stateless-functional-components-in-react--cms-29541t
https://jbee.io/web/components-should-be-flexible/
https://react-spectrum.adobe.com/react-spectrum/