[React] useContext

useContext

---

: 전역 상태 관리(테마,언어설정,사용자정보) 훅으로, 컴포넌트 간 데이터 쉽게 전달하도록 도와줌

  props drilling 문제 줄이는데 유용

 

*props drilling?

데이터를 자식-손자-증손자에 걸쳐 계속 내려야 할 때

-> 단점 : 만약 앱 내부 많은 컴포넌트들이 공통적으로 필요한 전역데이터(사용지,테마,언어설정)를 props로 일일이 단계별로 전달하면 복잡해지고 힘듦. 그리고 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 해당 값을 사용하지않는 경우에도 props 을 받고 전달해야함  => Context

 

Source : https://qiita.com/seira/items/fccdf4e73c59c491558d

Context

---

앱 내부에서 전역적으로 필요한 데이터들을 컴포넌트들끼리 쉽게 공유할 수 있는 방법제공

• 데이터를 가지고 있는 상위 컴포넌트가 Context를 통해 데이터를 알림.
• 그 데이터가 필요한 하위 컴포넌트는 useContext로 데이터를 간편히 받아옴.

 

*그러면 props 필요없는거아닌가?  (Context 단점)

특정context 사용 컴포넌트 다른 Context 사용 어려워 새로 만들어야 함 → 재사용 어려움

→ "전역적으로 필요한 데이터"에만 => context

Context의 값이 변경되면 구독중인 모든 하위 컴포넌트 재렌더링 => React.memo, context세분화

 

사용법

---

1. Context 생성

2. 데이터(값)를 제공할 컴포넌트를 Provider로 감싸고 값을 설정, 제공.

3.하위 컴포넌트에서 useContext를 사용해 값을 가져옴.

 

1. Context 생성

-context>ThemeContext.js

import { createContext } from "react";

const ThemeContext = createContext();

 

2. Provider로 데이터 제공

이제 Provider로 감싼 모든 하위 컴포넌트는 props를 사용하지 않고 value로 넣어준 값에 접근 가능

-App.js

import { ThemeContext } from './context/ThemeContext' //context import

function App() {
  return (
    //데이터(값)를 제공할 컴포넌트를 Provider로 감싸 값 설정
    <ThemeContext.Provider value="dark"> {/* value="전달하고자하는 데이터" , value={{}} */}
    	<page />
    </ThemeContext.Provider>
  );
}

 

3. 하위 컴포넌트에서 데이터 사용

중간 컴포넌트라 value 값 필요없음

function Page() {
  return <Content />;
}

필요 컴포넌트

import { useContext } from "react";
import { ThemeContext } from './context/ThemeContext'

function Content() {
  // 3. 자식에 useContext로 값(value) 접근
  const theme = useContext(ThemeContext);
  return <div>현재 테마는 {theme}입니다.</div>;
}