todolist를 만들며 useReducer와 useContext를 사용하게 되어 정리해 보았다.

useReducer란?

useState와 함께 상태관리를 할때 사용하는 훅으로 useContext와 함께 사용하는 경우가 많다.

사용법

function reducer(state, action) {
  return '변경된 state';
}

const [state, dispatch] = useReducer(reducer, 초기값);

순서대로 살펴보자면 reducer는 state를 인자로 받고 변경된 state를 반환한다.
action 객체는 주로 type값을 지닌 형태로 사용된다.

useReducer에 reducer함수와 초기값을 넣어준다.

여기서 state는 컴포넌트에서 사용할 상태이고 dispatch는 action을 발생시키는 함수이다.

useContext란?

react에서 컴포넌트 트리 전체에 데이터를 제공할수 있게 해주는 hook

사용법

const AppContext = createContext();

const App = () => {
  return (
    <>
      <Context.Provider value={...}>
        {}
	  </Context.Provider>
    </>
  );
}

createContext를 이용해서 Context를 만들고

Provider로 생성한 context를 하위 컴포넌트에게 전달한다.

const context = useContext(AppContext);

app에서 Provider로 묶어주고 하위 컴포넌트에서 useContext로 사용하고 싶은 context를 불러와서 사용하면 된다.