8.3.2 인풋 상태 관리하기

    이번에는 useReducer를 사용하여 Info 컴포넌트에서 인풋 상태를 관리해 보겠습니다. 기존에는 인풋이 여러 개여서 useState를 여러 번 사용했는데요. useReducer를 사용하면 기존에 클래스형 컴포넌트에서 input 태그에 name 값을 할당하고 e.target.name을 참조하여 setState를 해 준 것과 유사한 방식으로 작업을 처리할 수 있습니다.

    Info 컴포넌트를 다음과 같이 한번 수정해 보세요.

    Info.js

    import React, { useReducer } from 'react';
     
    function reducer(state, action) {
      return {
        ...state,
        [action.name]: action.value
      };
    }
     
    const Info = () => {
      const [state, dispatch] = useReducer(reducer, {
        name: '',
        nickname: ''
      });
      const { name, nickname } = state;
      const onChange = e => {
        dispatch(e.target);
      };
     
      return (
        <div>
          <div>
            <input name="name" value={name} onChange={onChange} />
            <input name="nickname" value={nickname} onChange={onChange} />
          </div>
          <div>
            <div>
              <b>이름:</b> {name}
            </div>
            <div>
              <b>닉네임: </b>
              {nickname}
            </div>
          </div>
        </div>
      );
    };
     
    export default Info;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.