useReducer & context API

프로젝트 단위가 커진다면 useState만으로 상태관리가 힘들어진다.
컴포넌트가 A->B->C->D->E 구조일때 A->E로 props를 보내려면 B,C,D를 모두 거쳐야 하기 때문이다. 이를 효율적으로 관리하기 위한 Hooks를 알아보자

요약부터 하자면, createContext에 상태값을 담아서 Provider로 감싼 모든 컴포넌트에 접근가능하게 해주는것(Table, Another컴포넌트에서 context접근가능 보내준다), 또 dispatch를 넘겨줘서 action을 type단위로 넘겨준다

Reducer, Context 선언

//App.js

import React, { useReducer, createContext } from 'react'

export const tableContext = createContext({
  tableText: '',
  cellText: '',
  dispatch: () => {},
})

const reducer = (state, action) => {
  switch (action.type) {
    case 'CLICK_CELL':
      return { ...state, cellText: 'tdClickd' }
    default:
      return state
  }
}

const initialState = {
  tableText: 'tableText',
  cellText: 'cell',
}

const ComponentName = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  const value = {
    tableText: state.tableText,
    cellText: state.cellText,
    dispatch,
  }
  return (
    <>
      <tableContext.Provider value={value}>
        <Table />
        <Another />
      </tableContext.Provider>
    </>
  )
}
export default Reducer

context 사용

//Table.js

import React, { useContext } from 'react'
import { tableContext } from '../Reducer'

const Table = () => {
  const { dispatch, tableText } = useContext(tableContext)
  const onCLickTableText = () => {
    dispatch({ type: 'CLICK_TABLE' })
  }

  return (
    <>
      <div onClick={onCLickTableText}>{tableText}</div>
    </>
  )
}