📚 Reference

• 공식 문서 1

📜 Chapter

useState

Redux

불변성 (Immutability) - React

useReducer

• useReducer
• React에서 제공하는 Hook 중 하나로, 컴포넌트의 상태(state) 관리를 돕는다.
• 특히 상태 로직이 복잡하거나, 다음 상태가 이전 상태에 의존적이거나, 여러 하위 값으로 이루어진 상태를 다룰 때 useState의 대안으로 유용하게 사용된다.

사용법

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

• state

  • 현재 컴포넌트의 상태 값이다.

• dispatch

  • 상태를 업데이트하기 위해 액션(Action)을 전달하는 함수이다.
  • 이 함수를 호출하면 React는 인자로 받은 액션과 현재 상태를 reducer 함수에 전달한다.

• reducer 함수

  • reducer는 상태 업데이트 로직이 담긴 순수 함수이다.
  • 이는 컴포넌트 외부에서 정의되며, 다음과 같은 인자를 받아 새로운 상태를 반환한다.

  reducer(state,action)→ newState
  

  • state: 현재 상태
  • action: 상태를 어떻게 변경할지에 대한 정보를 담고 있는 객체(일반적으로 { type: 'ACTION_TYPE', payload: data } 형태).

• 이 함수는 현재 상태를 직접 변경하지 않고, 액션의 타입에 따라 새로운 상태 객체를 반환해야 한다.

• 이는 상태 불변성(Immutability)을 유지하는 방식이며, Redux의 개념과 유사하다.

• initialState

  • 컴포넌트의 초기 상태 값이다.