[⚛️] useContext

useContext

 

📍Prop drilling

• props의 전달이 너무 깊어지면 발생하는 현상
• 문제점 : 너무 깊어지면 prop이 어떤 컴포넌트로부터 왔는지 파악이 힘듬, 오류 발생 시 추적이 힘듬

 

 

📍전역 상태 관리(react context API)

• 필수 개념
  • createContext : context 생성
  • Provider : context를 하위 컴포넌트에게 전달
  • useContext : context를 구독하고 해당 context의 현재 값을 읽음

 

 

📍useContext 적용법

 

[App.jsx 파일 내에 적용 시]

1. context 폴더 > js 파일(= context 파일 / 내부에 있는 모든 컴포넌트가 동일한 context를 유지)
2. js 파일 내에서 creatContext(초기 값(null))을 변수에 할당, export
3. 전역적 상태를 관리할 파일에 import
4. 맥락을 유지할 컴포넌트 위 아래로 <(context 명).Provider> </(context 명).Provider> 감싸기
5. 컴포넌트에 value 입력(초기값이 value값으로 변경됨) : value={{ props }}
6. 사이에 낀 컴포넌트의 prop drilling 지우기
7. 하위 폴더에서 props 꺼내쓰기: useContext 활용 & import => {props} = useContext(context 명);

 

[Context 파일 따로 작성 시]

1. prop drilling 지우기 (후순위로 둬도 괜찮음)   👉🏻9-1 에서 실행
2. context 폴더 > jsx 파일 (html 요소 return)
3. Provider 만들기 (함수 형식)
   3-1. Provider는 하위 요소들을 묶어서 주입하기 때문에 props로 {children}을 받음
4. createContext() 로 context 만들기
5. Provider 함수의 return 문에 주입할 형태 만들기
   👉🏻 return ( <(context 명).Provider> {children} </(context 명).Provider> )
6. export Provider
7. App.jsx (최상위 파일)에서 Provider 감싸기
8. Provider 내에서 필요한 value 주입하기
9. 사용하는 곳에서 useContext()
   9-1. props 구조분해할당

[Context]

//OlympicContext.jsx
import { createContext } from "react";

export const OlympicContext = createContext();   //export 필수!

export function OlympicProvider({ children }) {   //export 필수!
   return (
    <OlympicContext.Provider
      value={
        (sortType,
        ...  //생략
        removeNation)
      }
    >
      {children}
    </OlympicContext.Provider>
  );
}

 

[App]

// App.jsx의 return
return (
    <OlympicProvider>
      <Radio />
      <Header />
      <List />
    </OlympicProvider>
  );

 

[Context 사용 컴포넌트]

// Radio.jsx
const Radio = () => {
  const { sortType, setSortType } = useContext(OlympicContext);
  return ();
  
  
// Header.jsx
export const Header = () => {
  const { nation, setNation, addNewItem, upDate } = useContext(OlympicContext);
  return ();


// List.jsx
const List = () => {
  const { nationList, removeNation } = useContext(OlympicContext);
  return ();

 

 

📍주의사항

•  provider의 value의 값이 달라지지 않도록!!!!
  (하위 컴포넌트의 모든 값이 달라짐)