useContext 쭉쭉 파보기

리엑트의 Context

리엑트는 트리구조를 갖고 있다. 그래서 부모가 자식에게 데이터를 물려줄때 props로 데이터를 넘겨주는데 먼 자식일수록 코드가 복잡해 진다. 

첫째한테 알려주고 둘째한테 할려주고.. 셋쩨...어쩌구.. 이렇게 멀어질수록 코드가 복잡해 진다. 이걸 props drilling이라고 함

이때 Context를 사용하면 props전달 없이도 선언한 하위 컴포넌트 모두에서 원하는 값을 사용할 수 있다.

 

사용법

1. 생성

import React, { createContext, useState, useContext } from 'react';

const MyContext = createContext();

2. 사용

const MyProvider = ({ children }) => {
  const [value, setValue] = useState("Hello, World!");

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

3. 소비

const MyComponent = () => {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue("Hello, useContext!")}>Change Value</button>
    </div>
  );
};

 

특성

• 전역 상태관리 관소화
• props drilling 방지 
• 재사용 가능성

주의 점

함수형 컴포넌트 내부에서 사용할때는 컴포넌트 재활용이 어려워지는 것을  염두하고 쓸것. 왜냐하면 useContect가 선언돼 있으면 Provider에 의존성을 가지고 있는 셈이 돼서 값관리가 어려워짐, 리엑트는 부모 컴포넌트가 렌더링되면 하위 컴포넌트는 모두 리렌더링 되기때문.

그렇기 때문에 변화가 적거나 작은 컴포넌트에 사용해야한다.