[React] Context 상태 관리

리액트는 부모에서 자식으로 데이터가 흐르며 props를 이용해 넘겨줘야 하지만

context를 이용하면 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

전역적으로 데이터를 관리하는 기능.

 

function Counter() {
  return (
    <>
      <h2>카운터 : </h2>
      <button onClick={()=> increment()}>증가</button>
      <button onClick={()=> decrement()}>감소</button>
    </>
  );
}

export default Counter;

 

increment와 decrement 함수를 context로 만들어 전달해보자

 

import { createContext, useState } from "react";

// 1. 관리자 만들기 (전역 데이터 저장 공간)
export const CounterContext = createContext();

// 2. ui 디자인 가져오기(컴포넌트)
const CounterProvider = (props) => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };
  const decrement = () => {
    setCount(count - 1);
  };

  // 3. 관리자에서 자식에게 값 전달. 공급
  return <CounterContext.Provider value={{ count, increment, decrement }}>
   {props.children}
  </CounterContext.Provider>;
};

  // context 컴포넌트의 이름이 되며 값을 공급받을 자식 컴포넌트를 감싸줘야 함
export default CounterProvider;

 

 

import Counter from "./components/Counter";
import CounterProvider from "./contexts/CounterContext";

function App() {
  return (
    <>
      <CounterProvider>
        <Counter />
      </CounterProvider>
    </>
  );
}

export default App;

 

  useMemo(()=>(),[]);

 

같은 값을 대입 시 나오는 값이 동일한 경우, 즉 계산의 결과가 계속 동일하면

useMemo로 저장한 뒤 동일한 입력에 대응하는 방식

- Context Provider에 전달하는 경우 주로 사용

- const value = useMemo();

  const value = useMemo(
    () => ({ todos, changeInput, text, addList, onToggle, onDel }),
    [todos, changeInput, text, addList, onToggle, onDel]
  );