프로그래밍 언어/React
[React Hooks]useContext
claire
2022. 7. 6. 14:47
props를 사용해서 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달.
전역적인 데이터를 단계적으로 전달하려면 고통이다.
리액트가 제공하는 context API로 해결 가능.
useContext는 context로 공유한 데이터를 쉽게 받아오는 역할을 한다.
context는 꼭 필요할 때만 사용하는 게 좋다.
context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다. context의 주된 목적은 다양한 레벨에 있는 많은 컴포넌트들에게 전역적인 데이터를 전달하기 위함이다.
데이터를 제공해 줄 provider와 데이터를 받을 consumer가 있다.
context api를 무분별하게 사용하면 성능 이슈가 발생할 수 있다. 그 이유는 provider가 변경되면 consumer와 관련된 컴포넌트들이 전부 다시 렌더링되기 때문이다. 최적화가 가능하지만 꼭 필요한 곳에서 사용하는 것이 좋다. consumer를 사용하면 반드시 provider가 필요해서 컴포넌트가 독립적으로 존재할 수 없다는 단점이 있다.