Prop Drilling과 Context api

리엑트를 사용하다보면, 상위 컨포넌트에서 하위컨포넌트로 데이터를 보내야하는 경우가 있다.
이럴때 props로 전달하게 된다.

그런데 중첩된 컴포넌트에서 최상위 컴포넌트의 데이터를 최하위 컴포넌트에서 가져다 쓸때, props를 일일이 작성해야 하는 일이 발생한다. Prop Drilling. 이게 여간 귀찮은 일이 아니다. 가독성 또한 떨어진다. 또한 중간 컴포넌트는 데이터를 직접 사용하지도 않는데 받고 있다.

프롭스 드릴링 발생

그래서 Context API를 사용하는 것을 고려해볼 수 있다.
이것을 사용하면. props를 넘겨주는 일을 생략할 수 있다.

Context API는 리액트 내장 api로 Root에서 구성한 프로바이더를 전달하는 형식이다.
하위컴포넌트에서 useContext를 사용해 데이터를 꺼내 쓸 수 있다.

그런데 왜 사람들은 Redux를 사용할까?

주된 이유는 context api에서 상태값을 변경하면, provider로 감싼 모든 자식 컴포넌트들이 리렌더링된다는 점이다. 리렌더링이 되면서 성능저하를 일으킨다는 것.
두번째는 context api에 없는 라이브러리가 제공하는 기능을 사용하고 싶기 때문. (예를들어 dev tool 을 이용하면,  버그 디버깅을 잡아내기 유용하게 해준다.)

세번째는 미들웨어 사용  액션이 디스패치된 다음, 리듀서에서 해당 액션을 받아와 업데이트하기 전에 추가적인 작업을 할 수 있음 (https://react.vlpt.us/redux-middleware/)


이렇기 때문에 context api는 글로벌 상태관리 라이브러리를 대체할 수 없고, 여전히 많은 리액트 개발자들이 redux, mobx 등을 사용하고 있는 것이다.