useReducer()

코드를 작성할때 usestate() Hook 으로 상태를 업데이트 시켜줬습니다. 하지만 useReducer() 로도 업데이트를 시킬 수 있는데, 컴포넌트를 분리해도 사용할 수 있습니다. 컴포넌트 바깥에서나, 다른 파일에서도 작성할 수 있습니다.

import { Fragment, useReducer } from "react"

const reducers = (state, action) => {
       switch (action.type) {
           case 'INCREASE':
               return state + 1;
           case 'DECREASE':
               return state - 1;
           default:
               return state;
       }
   }
   
   const [state, dispatch] = useReducer(reducers, 0);

   const onIncrease = () => {
       dispatch({ type: 'INCREASE' });
   }

   const onDecrease = () => {
       dispatch({ type: 'DECREASE' });
   }

   return (<Fragment>
       <div>숫자 : {state}</div>
       <button onClick={onIncrease}>+</button>
       <button onClick={onDecrease}>-</button>
   </Fragment>)

우선 useReducer() 를 선언해주고, 인자값으로 reducer 함수와 초기 값을 넣어줍니다.

const [state, dispatch] = useReducer(reducers, 0);

---

reducer 함수구성은 먼저, state와 action 를 매개변수로 받습니다. 이후 이벤트가 발생을 처리하기 위해 action.type 으로 요청에 따라 이벤트를 처리합니다.

const reducers = (state, action) => {
       switch (action.type) {
           case 'INCREASE':
               return state + 1;
           case 'DECREASE':
               return state - 1;
           default:
               return state;
       }
   }

---

const onDecrease = () => {
   dispatch({ type: 'DECREASE' });
}

이벤트를 전달하기위해 type: '내용' 으로 요청을 합니다.

useReducer vs useState

우선 두가지 Hook은 비슷하고, 무엇을 사용해야 정답인지는 해답이 없습니다. 두개중에 편한것을 사용하시면 되겠습니다. , 하지만 사용 방법이 비슷하지, 각각 사용용도가 있습니다.
1. 만약 관리하는 변수 값이 적을때 useState
2. 관리하는 변수 값의 변화가 다양할 때 useReducer 를 사용해서 보기 좋게 코딩할 수 있습니다.

용도에 맞지 않다고 해서 오답은 아닙니다. 편한것을 사용하시면 됩니다.

Context API

context API는 전역 변수값을 관리할 때 사용됩니다.

React로 개발할 때 여러 컴포넌트를 거쳐서 데이터를 전달해야 하는거는 생각보다 많이 일어나게 됩니다. 한두개 정도는 그냥 구현하셔도 상관없으나, 여러 컴포넌트를 전달할 때 여간 귀찮은 일이 될것입니다.
후반구에 다시 설명하겠지만 useReducer() 와 Context 를 이용하면 Redux 에 비슷한 코드를 구현할 수 있습니다. 이건 마지막에 다시 설명하겠습니다.

초기 값 선언 :

// App.js
export const Dispatcher = React.createContext();

CreateContext() 안에 인자는 Context의 기본값을 설정합니다. 데이터가 입력되지 않았거나, 할당되지 않았을 때 기본값이 사용됩니다. 입력이 없으면 undefined로 설정됩니다.

• Context를 정의했으면 Export로 내보내줘서 다른 컴포넌트에서 받을 수 있게 해줘야 합니다.

// App.js
const data = 0;
<Dispatcher.Provider value={data}>
</Dispatcher.Provider>

이렇게 태그로 묶인 DOM은 Context값을 언제든지 조회할 수 있습니다.

이제 다른 코드에서 Context로 값에 접근할 수 있게 설정합니다.

// childApp.js
const dispatchs = useContext(Dispatcher); // context API
console.log(dispatchs);

변수는 물론 객체도 전달할 수 있습니다.

Context API 사용할 때 주의

• 만약 데이터가 Context 설정 기본값이나 undefined 로 나올때는 <dispatcher.Provider> 태그 내부 안에 없을때 발생합니다. 무조건 태그 안에 있어야 값을 사용할 수 있습니다. 태그 밖에 있거나 부모 태크에서 사용하려고 하면 undefined 를 반환합니다.

useReducer() 과 Context API 조합

useReducer() 과 Context API를 활용하면 Redux 와 비슷하게 구현할 수 있습니다. Context API로 내부 컴포넌트에게 값을 직접 전달하고, useReducer로 상태값을 업데이트합니다. 하지만 프로젝트 규모가 커지면 Reducer와 Context의 한계가 보이므로 Redux로 구현하는걸 추천드립니다.
Redux는 dispatch를 동기적 변경 , useReducer는 비동기로 변경하는 차이가 있습니다.