처음 만난 리액트 문서
14.6 useContext()
지금까지 클래스 컴포넌트에서 Context를 사용하는 방법과, 함수 컴포넌트에서 Provider와 Consumer를 사용해서 Context를 사용하는 방법에 대해서 배웠습니다. 앞서 말한것처럼 클래스 컴포넌트는 이제 거의 사용하지 않기 때문에, 함수 컴포넌트에서 Context를 사용하는 방법을 이해하고 있는 것이 더 중요합니다.
그런데 함수 컴포넌트에서는 Context를 사용하기 위해서 컴포넌트들을 매번 Consumer컴포넌트로 감싸주는 것보다 더 좋은 방법이 있습니다. 그것은 바로 우리가 앞서 7장에서 배운 훅(hooks)입니다. useContext()훅은 함수 컴포넌트에서 Context를 쉽게 사용할 수 있게 하기 위해 제공되는 훅입니다. useContext()훅은 React.createContext()함수 호출로 생성된 context객체를 인자로 받아서 현재 Context의 값을 리턴합니다. useContext()훅은 아래와 같이 사용합니다.
function MyComponent(props) {
const value = useContext(MyContext);
return (
...
)
}
useContext()훅을 사용하면 Context의 값을 다른 방식과 동일하게 component tree상에서 가장 가까운 상위 Provider로부터 받아오게 됩니다. 만약 Context의 값이 변경되면 변경된 값과 함께 useContext()훅을 사용하는 컴포넌트가 재렌더링 됩니다. 그렇기 때문에 만약 useContext()훅을 사용하는 컴포넌트의 렌더링이 꽤 무거운 작업일 경우에는 별도로 최적화 작업을 해줄 필요가 있습니다.
그리고 useContext()훅을 사용할 때는 파라미터로 context객체를 넣어줘야 한다는 것을 꼭 기억하기 바랍니다. 아래 코드처럼 Consumer나 Provider를 넣으면 안됩니다.
// 올바른 사용법
useContext(MyContext);
// 잘못된 사용법
useContext(MyContext.Consumer);
useContext(MyContext.Provider);
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page