ContextAPI

어떤 컴포넌트 트리 내에서 최상위 컴포넌트부터 최말단 컴포넌트에 걸쳐 전역으로 관리해야 할 데이터를 관리해주는 API

context란 전역데이터를 담고 있는 저장공간이다.

context 작성

import { createContext } from "react";
export const 변수명A = createContext(초기값)

context 사용

import React, { useContext } from 'react';
import { 변수명A } from '../Context/주소';

const Header = () => {
	const 변수명B= useContext(변수명A)
	return (
	);
};

---

Reducer와 Context 사용하기

[App.js]
import { createContext, useReducer } from 'react';
import Header from './components/Header';

// context 상태 생성
export const UserDispatch= createContext(null);

// reducer 초기값 지정
const initialState={inputText:"", todos:{}}

// reducer 함수 선언
function reducer(state,action){
  switch (action.type) {
    case 'ADDLIST':
      return{
        ...state,
        todos:[...state.todos, action.todo]
    }
    case "action명":
      return {
      *action명일때 상태값으로 리턴할 값*
      }
    default:
      break;
  }
}

function App() {
// reducer 사용
const [state,dispatch]=useReducer(reducer,initialState);
const {inputText}= state; //구조분해할당

  return (
    <UserDispatch.Provider value={dispatch}>
      // ❗ UserDispatch 이하에서 dispatch 함수를 사용할 수 있게 지정 
      <div className="App">
		<Header inputText={inputText}/>
        // ❗ Header에서 inputText 상태값을 사용할 수 있게 지정
      </div>
    </UserDispatch.Provider>
  );
}

export default App;

[Header.js]
import React, { useContext } from 'react';
import { UserDispatch } from '../App';

const Header = ({inputText}) => {
	const dispatch= useContext(UserDispatch);
	return (
		<div>
			<h2>to do list</h2>
			<input/>
			<button onClick={()=>{
              dispatch({
                type:'ADDLIST',
                todo:{inputText:inputText, isDone:false}
              })
            }}>+</button>
		</div>
	);
};

export default Header;

와 같이 useReducer의 dispatch를 context하여 내보낼 수 있다.
위 예제는 설명을 위해 간략하게 정리된 것으로, input에서 onchagne이벤트가 발생할때마다 dispatch로 inputText상태의 변화를 업데이트 시켜주지 않으므로 실제로 todolist와 같이 작동하지는 않는다.