prop drilling의 문제점과 해결 방안
- prop drilling이란, 리액트의 컴포넌트 트리에서 데이터를 전달하기 위해 필요한 과정을 말한다. prop 전달이 많아질수록 코드를 읽을 때 prop을 추적하기 힘들어지고, 유지보수도 어려워져 문제가 된다.
<문제가 발생하는 경우>
- 일부 데이터의 자료형을 바꾸게 되는 경우
ex. {user: {name: 'Joe West'}} -> {user: {firstName: 'Joe', lastName: 'West'}} - 필요보다 많은 프로퍼티를 전달하다가 컴포넌트를 분리하는 과정에서 필요 없는 프로퍼티가 계속 남는 경우
- 필요보다 적은 프로퍼티를 전달하면서 동시에 defaultProps를 과용한 결과로 필요한 프로퍼티가 전달되지 않은 상황을 인지하기 어려운 경우 (컴포넌트 분리 과정에서도 발생 가능)
- 프로퍼티의 이름이 중간에서 변경되어서 값 추적이 어려워지는 경우
<해결 방안>
- render 메소드를 불필요하게 여러 컴포넌트로 나누지 않고, 다시 재사용해야 하는 상황이 될 때까지 가능한 한 큰 render 메소드 하나를 사용하기
- defaultProps를 필수 프로퍼티에 사용하지 않기. defaultProps를 사용하면 컴포넌트가 제대로 동작하기 위해 실제로 필요한 프로퍼티를 전달받지 못한 상황인데도 중요한 오류가 숨겨지고, 소리없이 실패하게 된다. 그렇기 떄문에 defaultProps는 컴포넌트에 필수적이지 않은 부분에만 사용한다.
- state 관리. 애플리케이션의 특정 부분에만 state가 필요하다면, 그 state는 애플리케이션의 가장 높은 계층에 저장할 것이 아니 최소 공통 부모 컴포넌트에서 관리하기.
- 전역 상태관리 라이브러리 사용. redux, Mobx, recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러서 사용하기.
- children을 적극적으로 사용하기. children을 활용해 리팩토링을 진행한다면 하나의 컴포넌트에서 값을 관리하고, 그 값을 하위요소로 전달할 때 코드의 추적이 어렵지 않다.
children이란?
