FE Conf 2021 컴포넌트, 다시 생각하기 세션을 듣고 정리한 내용입니다.
원본 영상 🎬 https://www.youtube.com/watch?v=HYgKBvLr49c

컴포넌트에 대해 생각해보자

컴포넌트에 무엇을 작성하고, 어떻게 분리해야할까?
컴포넌트를 구성하는 것은?
유지보수를 방해하는 것은?

의존성

리액트 컴포넌트는 props, hooks, import로 의존성을 획득한다. 컴포넌트의 의존성의 타입은 크게 네가지로 분류할 수 있다.
1. CSS등 컴포넌트의 스타일
2. UI 조작에 필요한 커스텀 로직
3. 유저 액션을 통해 초래된 전역상태. 예를 들어 팝업의 열고닫기의 상태다.
4. Remote Data Schema. API 서버에서 내려주는 데이터의 모양이다.

page기반 라우터를 한다면 루트 컴포넌트에 대한 의존성을 가지게 된다. 컴포넌트에 새로운 정보를 추가할 경우 Props를 비롯해 하위 컴포넌트의 hooks, useEffect등을 수정해야한다.

그렇다면 컴포넌트간 의존성을 줄이기 위해서는 어떻게 할 수 있을까?

1. 함께 두기 - 비슷한 관심사라면 가까운 곳에

• 스타일과 로직은 같은 컴포넌트에 둔다
• 한 컴포넌트가 너무 커진다면 같은 폴더 내에 다른 파일로 분리한다.
• 리모트 데이터 스키마와의 의존성을 어떻게 하지?
  - 데이터 스키마 > 루트 컴포넌트 > 다른 컴포넌트 >>> 내 컴포넌트를 props로 연결하면 의존성이 강해지므로 데이터 저장소에서 바로 가져오면 루트 컴포넌트와의 의존성을 끊어낼 수 있다.
  

2. 데이터를 ID 기반으로 정리하기

• 데이터 정규화를 통해 모델명과 ID로 특정 데이터를 뽑아낼 수 있다.

$ yarn add normalizr

• 이 경우에도 모델을 알아야하는 숨은 의존성이 생기는데 GlobalID를 통해 사용할 데이터 모델 정보를 컴포넌트 내부에 둔다.
• GOI(Global Object IdentificationGOI) : 어떠한 코드 위치, 맥락에 있든 GlobalID 기반으로 특정 객체를 가져올 수 있는 API
  

3. 의존하는 모델을 그대로 드러내기

• 모델들 간의 의존성이 있는 경우?
  - user model과 image model의 의존성이 있다.

  • image model을 정확히 알아야함

    interface Props{
    	user:{
        	name:string
            nickname:string
            totalFollowerCount:number
            lastActivityAt:Date
            image:{
            	thumbnailUrl:string
            }
        }
    }

• 한 컴포넌트에서 여러 모델을 사용하는 것은 관심사 분리가 안되는 것이다.

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

• 컴포넌트는 리모트 데이터 스키마에 따라 변하는 경우가 많다.
• 같은 모델을 의존하는 컴포넌트는 재사용하고 다른 모델을 의존하는 컴포넌트를 분리하면 컴포넌트 변화에 대응하기가 용이하다.

지금까지 컴포넌트는 컴포넌트 자체의 모양에 따라 재사용하는 경우가 많았다. 그래서 모양이 달라질 때 props를 추가해 변화를 관리해왔는데, props가 너무 많아지거나, 같이 사용해도 될까라는 의문이 들 때가 있었다. 컴포넌트를 모델 기준으로 분리하면 그 고민들의 많은 부분을 해결할 수 있을 것 같다.! 컴포넌트에 대한 새로운 인사이트를 얻었다.

데이터 정규화는 잘 모르는 부분이라 추가적으로 공부를 해봐야겠다.