hook이론3. useContext()

목차

1. useContext() 메서드란?
2. 문법
3. 특징

 

---

 

 

 

이전 게시글에서 전역 데이터를 공유하기 위한 contextAPI에 대해 배운 적있다.

 

<참고>

https://yellow-w.tistory.com/254?category=1037018

 

오늘은 전역 데이터를 공유하기 위한 hook 메서드 인 useContext()에 대해서 알아보자.

 

 

 

 

1. useContext() 메서드란?

• 전역 데이터 공유를 위한 hook 메서드
• context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환

• context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정

 

2. 문법

2-1. 매개변수

• context 객체 그 자체여야 함
• 매개변수로 들어간 객체는 컴포넌트로 retrun 됨

const value = useContext(MyContext);	// O

// const value = useContext(MyContext.Consumer) ; 	틀린 사용

 

3. 특징

• 컴포넌트에서 가장 가까운 MyContext.Provider가 갱신되면 훅은 MyContext provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거
• 상위 컴포넌트에서 React.memo 또는 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트 자체에서부터 다시 렌더링
• class 컴포넌트에서의 MyContext.Consumer와 비슷. 단, useContext() context를 읽고, contex의 변경 구독만 가능
• context 값 설정은 트리의 상위 계층에서의 MyContext.Provider 필요

 

 

<참고>
useContext를 호출한 컴포넌트는 context 값 변경 시 리렌더링
컴포넌트 리렌더링에 많은 수고가 필요하다면 최적하기 하기 위하여 메모제이션 사용 추천