[리액트] Input이 여러 개 일때 효율적으로 State 관리하기

리액트에서 Input이 여러 개 일때 효율적으로 State 관리하기

Input이 여러개인 회원가입을 예로 들어보자.
아래는 이름, 아이디, 별명을 입력받는 코드이다.

App.js

import React from "react";

const App = () => {
  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="아이디" />
      <input placeholder="별명" />
      <button>초기화</button>
    </div>
  );
};

export default App;

• Input과 3개와 버튼 1개가 있을 때 Input을 관리하기 위해 1개의 Input마다 state를 만들고, 각 state를 업데이트 해줄 함수를 아래처럼 작성해보자.

App.js

import React, { useState } from "react";

const App = () => {
  // 각 Input State
  const [name, setName] = useState("");
  const [id, setId] = useState("");
  const [nickname, setNickName] = useState("");

  // 각 State를 업데이트할 함수 3개
  const onChangeName = (e) => {
    const { value } = e.target;
    setName(value);
  };
  const onChangeId = (e) => {
    const { value } = e.target;
    setId(value);
  };
  const onChangeNickName = (e) => {
    const { value } = e.target;
    setNickName(value);
  };

  return (
    <div>
      <input onChange={onChangeName} value={name} placeholder="이름" />
      <input onChange={onChangeId} value={id} placeholder="아이디" />
      <input onChange={onChangeNickName} value={nickname} placeholder="별명" />
      <button>초기화</button>
    </div>
  );
};

export default App;

위 코드에 오류는 없지만 비효율적이다. 왜냐하면 useState를 3번 작성하고 각 State를 업데이트해줄 함수도 3개를 작성해서 코드가 길어지기 때문이다.

Input의 정보를 객체형태로 useState 하나에 작성하고 하나의 함수를 이용하여 코드를 간결하게 작성할 수 있다.

하나의 useState와 하나의 함수를 사용한 코드는 아래와 같다.

App.js

import React, { useState } from "react";

const App = () => {
  // 객체형태로 input 저장
  const [info, setInfo] = useState({
    name: "",
    id: "",
    nickname: "",
  });

  const { name, id, nickname } = info;

  const onChange = (e) => {
    const { name, value } = e.target;
    setInfo({
      ...info,
      [name]: value,
    });
  };

  const onClick = () => {
    setInfo({
      name: "",
      id: "",
      nickname: "",
    });
  };

  return (
    <div>
      <input name="name" onChange={onChange} value={name} placeholder="이름" />
      <input name="id" onChange={onChange} value={id} placeholder="아이디" />
      <input name="nickname" onChange={onChange} value={nickname} placeholder="별명" />
      <button onClick={onClick}>초기화</button>
    </div>
  );
};

export default App;

• const { name, id, nickname } = info; : ES6에서 추가된 비구조화 할당(Destructuring Assignment)을 통해 값을 추출 한 것이다.

• ...info는 spread 문법으로 info 객체를 펼쳐 객체를 복사해 준다.

• [name] : value에서 []를 사용한 이유는 객체의 key 값을 동적으로 할당하기 위해 []를 사용한다. [name]은 name의 변수를 불러온다.

오류가 있으면 댓글로 알려주세요!

참고 자료 : 벨로퍼트 모던 리액트