useContext

harry·2023년 4월 6일
0

context?

App 안에서 전역적으로 사용되는 데이터들을 여러 컴포넌트들 끼리 쉽게 공유할 수 있는 방법을 제공한다.

일반적으로 우리는 컴포넌트 간에 데이터를 전달할 때, 오직 props를 통해 부모 컴포넌트에서 자식 컴포넌트로(위에서 아래로)만 전달 할 수 있다. (이 과정을 prop drilling이라고 한다.)
하지만 애플리케이션 안의 여러 컴포넌트들에 데이터를 전달해야 하는 경우 이 (prop drilling) 과정이 매우 번거롭다.

이때 context를 사용하면 props로 데이터를 일일히 전달하지 않아도, 하위 컴포넌트가 어디에 위치하든 해당 데이터를 편하게 가져와 쓸 수 있다.

즉, context는 전역적인 데이터를 사용하기 편리하게 해준다.

useContext

context로 공유한 데이터를 하위 컴포넌트에서 쉽게 받아올 수 있도록 도와주는 역할을 하는 React Hook이다.

context는 꼭 필요할 때에만!

  • context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다.
  • 단순히 prop drilling을 피하기 위한 목적이라면 componenet composition(컴포넌트 합성)을 먼저 고려해보자.



별코딩 유튜브
React 공식 문서 - context
React 공식 문서 - useContext

0개의 댓글