여러개의 input 상태 관리하기

김민찬·2022년 4월 22일
0

React

목록 보기
7/13
post-thumbnail

늘어나는 input에 따라 같이 늘어나는 상태들 해결법

기존에 작은 프로젝트들을 하면서 나의 input에 대한 상태 관리 방법은 간단했다.

바로 <1 input 1 state>였다.

그에 따라 오는 친구가 하나 더 있으니 input에 상태를 변경해주는 Function이다.

이로서 1개의 input을 만들기 위해서는 2개의 추가 작업이 필요한 것이다.

작업에 따라오는 코드량도 어마 무시하다.

아래처럼 input이 6개만 되어도 보일러플레이트 코드의 량이 엄청났다.



그래서 함수와 상태를 줄이기 위해서 찾아보다가 다음과 같은 방법을 찾아냈다.

객체 리터럴을 사용한 방식

input의 name 속성과 객체 리터럴을 사용한 방식이다.

import { useState } from 'react';

export default function App() {
  const [inputs, setInputs] = useState({
    userName: '',
    userId: '',
    hobby: '',
    skill: '',
  })

  const { userName, userId, hobby, skill } = inputs;

  const onChange = ({ target }) => {
    const { value, name } = target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

  return (
    <div className="App">
      <input name='userName' onChange={onChange} value={userName} />
      <input name='userId' onChange={onChange} value={userId} />
      <input name='hobby' onChange={onChange} value={hobby} />
      <input name='skill' onChange={onChange} value={skill} />
    </div>
  );
}

참고자료

여러개의 input 상태 관리하기 - 벨로퍼트

profile
두려움 없이

0개의 댓글