React - Props drilling 이슈와 및 전역 상태관리

리액트의 단점은 component 끼리 state 전송이 어렵다는 점입니다.

만약에 손자 component 에 최상위 부모가 가진 state 를 props 로 전송하려면 다이렉트로 전송은 안되고 그 사이에 자식들을 전부 거쳐야 전송할 수 있습니다.

 

그래서 만약에 component 가 10중첩 같이 뎁스가 많이 깊어지면 props 전송을 9번이나 해야하는 문제점이 있습니다.(props drilling 이슈)

 

props 의 단점 해결방법

Context API ( 리액트 기본문법 )

 

Context API 를 사용하면 props 전송없이 state 를 공유할 수 있습니다.

 

그러나 두가지 단점 때문에 실무에서는 많이 사용하지는 않습니다.

• 첫번째 단점은 성능이슈가 있습니다. state 변경시에 쓸데없는 것까지 재랜더링 하기 때문에 성능이 떨어질 수 있습니다.( 해당 state 를 사용하던 안하던 Context 로 감싸고있는 모든 component 를 재랜더링 합니다. )
• 두번째 단점은 component 재활용이 좀 어렵습니다. 다른 페이지에 재사용하려고 할 때 Context 를 import 해야하고 Context.Provider 로 감싸야하고 등등 변경해야하는 문제들이 많습니다.

사용법

• Context 란 간단하게 말해서 state 보관함이라고 할 수 있습니다.
• 먼저 import 를 하고 함수 밖에다가 Context 를 하나 만들어줍니다. (다른 컴포넌트에서 import 할 수 있도록 export 해줍니다)

 

• 그 다음에 내가 state 공유를 원하는 Component 를 Context 태그로 감싸줍니다.

 

• 마지막으로  Context 의 value 속성에 내가 넘겨주고 싶은 state 를 적어주면 됩니다. ( 여기까지하면 부모 component 에서 공유하는 작업은 끝났습니다. )

 

• 공유된 state 를 자식 component 에서 사용할때는 먼저 import 를 해줘야합니다.

 

• 그 다음에 useContext 라는 훅을 이용해서 import 한 Context 를 해체해줍니다.

 

Redux 등 외부라이브러리 사용

• Redux
• Recoil
• Jotai
• Zustand