React - useReducer

userState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해 주고 싶을 때 사용하는 Hook

리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다.(새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 한다)

 

예제로 여러 인풋의 상태를 저장해봅시다!

import React,{useReducer} from 'react';

function reducer(state,action){
	retunr{
    	...state,
        [action.name] = action.value
       };
 }

 

우선 위와 같이 reducer 함수를 작성합니다. 

1. ...state는 기존에 있는 state 값들을 복사 시키는것과 같습니다.

2. action 객체를 받아서 name을 가리키는 곳에 value를 넣어줍니다 

-> useReducer에서의 액션은 그 어떤 값도 사용 가능하기 때문에 아래와 같이 이벤트 객체가 가지고 있는

e.target 값 자체를 액션 값으로 사용합니다.

const Info=()=>{
    const [state,dispatch] = useReducer(reducer,{
        name:'',
        age:0
    });
    const {name,age}=state;
    
    const onChange = e =>{
        dispatch(e.target);
    }
    return(
        <div>
            <div>
                <input name = "name" value={name} onChange={onChange}></input>
                <input name = "age" value={age} onChange={onChange}></input>
            </div>
            <div>
                <b>이름:{name}</b>
                <b>나이:{age}</b>
            </div>
        </div>
    )
}