Hook - UseReducer

11-1. Basic

• 다양한 컴포넌트의 state를 업데이트 할 때 사용하는 hook
• 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 밖으로 분리 가능
• 리듀서는 새로운 상태를 만들 때 반드시 불변성을 지켜주어야 함(기존 state의 값을 변경하는 것이 아니라 새롭게 생성)

const {useReducer} = React;

        /* 리듀서 함수는 첫 번째 인자는 기존 상태 값, 두 번째 인자는 업데이트를 위해 필요한 정보를 담은 객체를 전달 받는다. */
        function reducer(state, action){

            /* action에 전달 된 type에 따라 새로운 state를 갱신할 객체를 생성해서 리턴한다(불변성 유지) */
            switch(action.type){
                case 'INCREMENT' : // 증가
                    return { value : state.value + 1 };
                case 'DECREMENT' : //감소
                    return{ value : state.value - 1 };
                default :           //아무 타입도 해당하지 않을 경우 기존 state 반환
                    return state;
            }
        }

        function Counter(){

            /* useReduce의 첫 번째 인자는 리듀서 함수,
            두 번째 인자는 해당 리듀서의 기본 값 
            state는 현재 상태이고 dispatcher는 액션을 발생시키는 함수이다. */
            const [state, dispatcher] = useReducer(reducer,{ value : 0 });
            console.log(useReducer(reducer, {value : 0}));
            
            return (
                <>
                    <h1>count : {state.value} </h1>
                    <button
                        onClick = {() => dispatcher({ type : 'DECREMENT'})}
                    > -1 </button>
                    <button
                        onClick = {() => dispatcher({ type : 'INCREMENT'})}
                    > +1 </button>
                </>
            );
        }

        ReactDOM.createRoot(document.getElementById('root')).render(<Counter/>);

11-2. Form Controll

• 리듀서를 이용해 input 입력 값 상태 관리

/* 리듀서를 활용해 input 입력 값 상태 관리 */
         const {useReducer} = React;
         
         function reducer(state, action){
            return ({
                ...state,
                [action.name] : action.value
            });
         }

         function RegistForm(){

            const [state, dispatcher] = useReducer(reducer,{
                name : '',
                nickname : ''
            });

            const { name, nickname } = state;

            /* change 이벤트가 발생하면 reducer로 이벤트 발생 객체를 전달한다. */
            const onChangeHandler = e => dispatcher(e.target);

            return (
                <>
                    <label>이름 : </label>
                    <input type="text" name="name" value={name} onChange = { onChangeHandler }/><br/>
                    <label>닉네임 : </label>
                    <input type="text"name="nickname" value={nickname} onChange = { onChangeHandler }/><br/>
                    <h3> 입력한 이름 : {name}</h3>
                    <h3> 입력한 닉네임 : {nickname}</h3>
                </>
            )
         }

         ReactDOM.createRoot(document.getElementById('root')).render(<RegistForm/>);