react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 useReducer

• useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 업데이트해주고 싶을 때 사용한다.

💡 useReducer를 사용했을 때의 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다.

✨ reducer

• 현재 상태(state)와 업데이트를 위해 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수이다.
• 불변성을 지키면서 업데이트된 새로운 상태를 반환해야 한다.
• action 은 어떤 값도 사용 가능하다.

function reducer(state, action){
    return {};
}

✨ state, dispatch

• useReducer의 첫번째 인자에는 reducer함수를 넣고, 두번째 인자에는 초기 상태값을 넣는다.
• useReducer를 호출하고 비구조화 할당을 통해 state와 dispatch를 추출한다.
• state는 현재 상태값이고, dispatch는 action값을 인자로 받아 reducer함수를 호출하는 함수이다. (dispatch(action)

예시

// Counter
import { useReducer } from 'react';

function reducer(state, action){
    switch(action.type){
        case "INCREMENT":
            return { value: state.value + 1};
        case "DECREMENT":
            return { value: state.value - 1};
        default:
            return state;
    }
}


const Counter = () => {
    const [state, dispatch] = useReducer(reducer, { value: 0 });
    return (
       <div>
           <h1>number : {state.value}</h1>
           <button onClick={() => dispatch({type: "INCREMENT"})}>+1</button>
           <button onClick={() => dispatch({type: "DECREMENT"})}>-1</button>
       </div>
    );

}