컴포넌트, 다시 생각하기

이 포스팅은 컴포넌트 다시 생각하기 영상을 보고 정리한 글입니다.

React 컴포넌트의 의존성 파악하기

의존성: 어떤 것과 다른 것이 변경에 있어서 서로 영향을 주고받는 관계

1. 컴포넌트의 CSS 스타일
2. UI 조작에 필요한 커스텀 로직(custom Hook)
3. 전역상태(유저의 액션에 의해 초래된 상태)
4. 리모트 데이터 스키마 (API 서버에서 내려주는 데이터의 모양)

의존성을 하나씩 정리해봅시다!

1. 함께 두기

비슷한 관심사라면 가까운 곳에

2. 데이터를 ID기반으로 정리하기(데이터 정규화)

클라이언트에서 데이터를 Id를 통해 전역적으로 관리하면 큰 이점이 있다. 바로 상위 컴포넌트에서 해당 데이터의 스키마를 알 필요가 없고, Id만 내려주면 하위 컴포넌트가 원하는 데이터에 바로 접근할 수 있다는 점이다. 이렇게 되면 상위 컴포넌트는 데이터 스키마에 의존하지 않기 때문에, 데이터 스키마의 변경이 일어나도 상위 컴포넌트를 수정할 필요가 없다

3. 이름 짓기

의존한다면 그대로 드러내기

🙋‍♀️ 재사용하는 이유
개발할 때 편리하기위해 (x)
-> 변경할 때 편리하기위해!

4. 모델 기준으로 컴포넌트 분리하기

같은 모델을 의존하는 컴포넌트: 재사용
다른 모델을 의존하는 컴포넌트 : 분리

컴포넌트를 나누는 기준을 찾기위해 다시 공식문서를 보았다.

어떤 것들을 컴포넌트로 만들어야할 지 어떻게 알 수 있을까요?
그냥 새 함수나 객체를 만들 지 말 지 결정하는 기준을 그대로 적용하세요.
그런 테크닉 중 하나는 단일 책임 원칙 (single responsibility principle) 이며, 이는 컴포넌트가 한가지의 작업만 하는 것이 이상적이라는 것입니다. 컴포넌트가 점점 커진다면 작은 서브컴포넌트들로 분리되어야합니다.

참고

React스럽게 생각하기