이틀동안 google oauth에 대해서 엄청 삽질했음 ..
결론은 아직 해결 못함 ...
그래도 다른 공부한 내용인 context api에 대해서라도 정리해본다 ..
reducer 세팅
react의 내장함수 useReducer를 사용하면 reducer와 initialState를 인자로 받아 reducer에 initialState를 연결해준다.
return 값으로는 state와 dispatch 를 return 한다.
useReducer() { return [state, dispatch ]} 이와 같은 형태인듯
대신 redux를 사용할 경우에는 redux의 store와 container를 연결하는 부분이 connect
혹은 useSelector 정도 였다면 Context API에서는 useReducer를 사용해주는
Provider 함수에서 뿌려주는 역할인듯 ( like. redux의 store연결 )
++) redux는 reducer연결을 (combineReducer) 를 통해서 함
context 사용
const TodoStateContext = createContext();
const TodoDispatchContext = createContext();
const TodoNextIdContext = createContext();createContext메서드를 실행해주면 해당 변수에는 Provider 컴포넌트가 생긴다.
따라서 사용할 값 지정시에 Provider 컴포넌트를 렌더링하여 value 속성을 넣어줘야함
export function TodoProvider({ children }) {
const [state, dispatch] = useReducer(todoReducer, initialTodos);
const nextId = useRef(5);
return (
<TodoStateContext.Provider value={state}>
<TodoDispatchContext.Provider value={dispatch}>
<TodoNextIdContext.Provider value={nextId}>
{ children }
</TodoNextIdContext.Provider>
</TodoDispatchContext.Provider>
</TodoStateContext.Provider>
);
}redux를 사용했다면 사용하려는 component에서 해당 액션 동작을 * as SomethingActions 로 import 해오고 해당 Action에 대한 dispatch를 했었다라면(hooks는 useDispatch, redux는 connect 로 dispatch방식(react-redux 사용))
context api를 사용한다면 redux에서 combineReducer를 통해 정리 및 Action 호출함수를 import 해오던 방식과 다르게 reducer마다 Provider라는 함수를 만들어, 여기에 state와 dispatch를 정리함.
그리고 호출하는 쪽에서 해당 reducer의 Context를 import해서 이 Context에 연결된 value를 사용할 수 있다.
-> state를 연결한 Provider라면 state 변수로 선언, dispatch도 동일
component에서는 해당 context import하고 react 내장함수 useContext에 넣어주어야 사용 가능!
이후 사용하려는 component를 TodoProvider로 감싸주고, 내부에서 useTodoState와 같은 custom hook을 사용해주면 context 에 연결해둔 값으로 접근이 가능해진다.
그렇다면 왜 context api 인가?
- 일단 module이 필요없다는 측면에서 프로젝트의 용량이 가벼워짐
- redux보다 러닝커브가 낮음. and 코드 면적이 작아짐
velopert님의 https://react.vlpt.us/mashup-todolist/02-manage-state.html 를 보고 공부하며 개인적인 이해를 위해 두서없이 정리한 내용입니다.
