2회차 발표

📌 useReducer

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...

 

 

📍매개변수

• reducer
• initialArg
• 선택적 init

📍반환값

useReducer는 정확히 두 개의 값을 가진 배열을 반환합니다:

1. 현재 state. 첫 번째 렌더링 중에는 init(initialArg) 또는 (init이 없는 경우) initialArg로 설정됩니다.

2. state를 다른 값으로 업데이트하고 렌더링을 촉발할 수 있는 dispatch function.

* useReducer가 반환하는 dispatch 함수를 사용하면 state를 다른 값으로 업데이트하고 다시 렌더링을 촉발할 수 있습니다.

 

📍주의사항

useReducer 는 훅이므로 컴포넌트의 최상위 레벨 또는 자체 훅에서만 호출할 수 있습니다. 반복문이나 조건문 내부에서는 호출할 수 없습니다.

📌 사용법

1️⃣ 컴포넌트에 reducer 추가하기

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...

1. 이 state 변수의 현재 state. 처음에 제공한 초기 state로 설정됩니다.

2. 상호작용에 반응하여 이를 변경할 수 있는 dispatch함수.

 

화면에 표시되는 내용을 업데이트하려면 사용자가 수행한 작업을 나타내는 객체, 즉 액션을 사용하여 dispatch를 호출합니다.

function handleClick() {
  dispatch({ type: 'incremented_age' });
}

 그 다음 현재 state와 액션을 reducer함수에 전달합니다. Reducer는 다음 state를 계산하고 반