[React] Todo-list : 컴포넌트 만들기 3

📌 useReducer

useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도, 다른 파일에 작성 후 불러와서 사용하는 것도 가능!

reducer

reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다.

action

action은 업데이트를 위한 정보를 가지고 있는 객체

주로 type값을 지닌 객체 형태로 사용하며, 이때 보통 type값은 대문자와 _로 구성한다.

// 새 할 일을 등록하는 액션
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'useReducer 배우기',
    done: false,
  }
}

useReducer 사용법

const [state, dispatch] = useReducer(reducer, initialState);

state: 컴포넌트에서 사용할 수 있는 상태
dispatch: 액션을 발생시키는 함수 (dispatch({ type: 'INCREMENT' }) 형태)
useReducer의 첫번째 인자: reducer함수
useReducer의 두번째 인자: 초기 상태

---