Props vs Redux (컴포넌트 잘짜기 2탄)

Props vs Redux

동영상 재생 페이지에 동영상 재생목록(플레이리스트)을 만들면서 Props로 데이터를 2~3단계 내려줬다.

Props로 내려줄지 Redux를 사용하여 관리를 해줄지 많이 고민했었다. 2~3단계쯤 Props를 사용하니 한 페이지 내에서 데이터 이동이지만 너무 많은 것같았고, Redux를 사용하자니 진짜 한 페이지에서만 사용했기때문에 애매했기 때문이다.

또 찾아보니

Short-term	Medium-term:	Long-term:
빠르게 변화하는 데이터	앱 실행동안 유지되는 데이터	여러 페이지간의 방문, 새로고침 동안 유지되어야 하는 데이터
UI의 텍스트 필드의 문자, 또는 리스트의 아이템을 필터링 하는 것과 같이 빠르게 변화 일어나고 프로젝트의 전반적으로 변화를 주지않는 데이터는 지역 상태(Local State)를 사용하는 것이 유리하다.	API를 통해서 로드된 데이터 나 새로고침 이전까지 유지되어야 하는 데이터로 프로젝트의 전반적으로 영향을 주는 데이터는 Redux Store(State)를 사용하는 것이 유리하다.	이 경우에는 서버의 데이터 베이스 또는 브라우저의 로컬 스토리지(local storage)에 저장하여 사용한다.

출처: https://kimch3617.tistory.com/entry/React-Local-State-vs-Redux-StateStore-언제-왜-사용해야-하나 [코드 저장소]

이렇게 나와있다.

음 전역에서 쓰는 Redux에 추가하는 것은 너무 비효율적인것같다.

대신에 컴포넌트의 Depth를 줄였으면 어떨까싶다. 지금 생각해보면 컴포넌트를 너무 잘게 쪼갰기때문에 Props를 많이 내려줘야했던 것같다. Props를 사용해야하는 컴포넌트의 경우 Depth를 줄여서 Props비용을 줄이는 것도 한 방법인것같다.

결국 바로 위에 쓴 <컴포넌트 잘짜기>와 이어지는 이야기인것같다. 컴포넌트를 잘짜는 것은 정답이 없는것같다.

컴포넌트를 쪼개면 가독성이 좋아지고 렌더링도 최적화 될 수 있다. (모든 페이지를 다시 렌더링 안해도 되니까!)

반면에 한 컴포넌트를 쪼개지 않으면 Depth에 따른 Props비용을 절약시켜주는 장점을 가지고있다.

컴포넌트를 잘 짜는것은 이 두가지 측면을 고려하여 비용을 최소화하는 것이다.