useContext 왜쓰는데?

리액트에서 일반적으로 부모컴포넌트 > 자식컴포넌트로 데이터를 전달해줄때 props로 전달해주었다

 

그런데 만약 

부모 > 자식 > 그자식 그 자식의 자식 ....*100 이라면???

•  컴포넌트에서 prop 을 사용하지 않고 자식에게 전달만 하는 경우도 있다

여기서 바로 prop drilling이 일어나게 된다.

• 깊이가 너무 깊어지면 prop이 어떤 컴포넌트에서 전해져 왔는지 모를수 있다.
• 컴포넌트에서 오류가 발생했을때 어떤컴포넌트에서 오류가 발생했는지 추적하는데 오래걸린다.

 

출처 : https://www.copycat.dev/blog/react-context/

 

그러면 이런 문제점을 contextAPI로 해결해보자

• useContext hook 을 통해서 전역데이터를 관리 할수 있다.
• 여기서 App.jsx전체를 묶을수도 있고, 컴포넌트들끼리도 묶을수 있겠다.

context : 문맥, 맥락

특정 영역 안에서 context (상태)를 공유하여서 사용할수 있다.

 

contextAPI 필수 개념

• createContext : context생성
• useContext : context를 구독하고 해당 context의 값을 읽는다.
• provider : context를 하위 컴포넌트에게 전달해준다

 

사용법

당연히 props로 넘겨주고 받아오는 코드들은 필요없다.

 

1. context폴더 안에 globalContext.jsx파일을 생성한다 (jsx파일명은 context를 써야하니 ~~Context로 써주자.)

createContext()로 Context생성

• value 를 객체로(키,벨류) 넣어준다 : (상태들을)

import React, { createContext } from "react";

export const GlobalContext = createContext(null); 
//여기서 null은 기본값
//export로 내보내줘서 다른곳에서 쓸수있게 함

export function GlobalProvider ({children}) {
  //하위 컴포넌트들이 쓸 state모두 기입
  const [a, setA] = useState("");
  const [b, setB] = useState("");

  
    <GlobalContext.Provider value={{ a:a, b:b }}>
      {children}
    </GlobalContext.Provider>
}

 

2. 상위컴포넌트 (ex.App.jsx) 를 GlobalProvider로 감싸준다.  (안에 있는 컴포넌트들은 globalContext 내부 맥락을 유지한다라는 의미)

import GlobalProvider from './GlobalContext'; // 만든 Context 가져오기

const ParentComponent = () => {

  return (
    <GlobalProvider>
      <ChildComponent />
    </GlobalProvider>
  );
  
 }

 

 

3.useContext() : state를 쓰고싶은 컴포넌트에서 불러와준다

const data = useContext(GlobalContext)
useContext(아까 생성한컴포넌트 명)
<p>{data.a}</p>

 

https://github.com/hyerin-kang/Pokemon-dex/issues/4

Context API로 리팩터링 및 최종 스타일링 · Issue #4 · hyerin-kang/Pokemon-dex

실제 미니프로젝트에서 적용해보았따! (의외로 간-단)

 

 

 

하지만 contextAPI는 만능이 아니다.

provider 에서 제공하는 value가 달라지면 useContext를 사용하는 모든 컴포넌트가 리랜더링되는 문제가 또 있다..

그래서 value를 쓸때 주의해서 써야한다! 

이문제는 메모이제이션에서 해소 할수 있다.. (다음편에 계~속!)