[React.js] 하나의 state 로 여러 개의 input을 관리하기

sirl·2021년 10월 8일
20

React 표류기

목록 보기
1/2
post-thumbnail

리액트 코드를 작성하다보면, 한 컴포넌트 내에서 여러개의 input을 관리할 일이 생길 수도 있다.

import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("");
  const [nickname, setNickName] = useState("");

  return (
    <div className="App">
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={nickname} onChange={(e) => setNickName(e.target.value)} />
    </div>
  );
};

export default App;

위의 코드는 name 이라는 값과 nickname 이라는 값을 입력받는 컴포넌트를 작성한 코드이다.

하지만 만약에 수십개의 입력을 받아야하는 컴포넌트라면?
useState를 100줄씩 쓸 수는 없는 노릇이다.

그래서 1차적으로 개선한 코드는 다음과 같다.

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState({});

  const onChangeHandler = (e) => {
    setValue({ ...value, [e.target.name]: e.target.value });
  };

  return (
    <div className="App">
      <input name="name" onChange={onChangeHandler} />
      <input name="nickname" onChange={onChangeHandler} />
    </div>
  );
};

export default App;

이렇게 작성하고 보니, 여러 개의 input을 관리할 수 있었다.

하지만 onChangeHandler 함수는 아직 좋지 않다.
왜냐하면, React는 DOM 과의 상호작용을 줄이기 위해서 state 업데이트를 대기열에 넣고 계산하기 때문에 정말 운이 안좋으면 작동하지 않을 수 있다.

당연히 React에서는 이러한 문제를 해결하기 위해 previous state를 가져와 사용할 수 있다.

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState({
    name: "",
    nickname: "",
  });

  const onChangeHandler = (e) => {
    setValue((prevState) => {
      return { ...prevState, [e.target.name]: e.target.value };
    });
  };

  return (
    <div className="App">
      <input name="name" onChange={onChangeHandler} />
      <input name="nickname" onChange={onChangeHandler} />
    </div>
  );
};

export default App;

onChangeHandler 함수가 prevState 값을 통해 이전 값을 통해 업데이트 하도록 변경되었다.

음.. 이정도면 만족이다 :D

profile
쉽게 읽을 수 있는 글을 쓰려고 노력하고 있습니다.

7개의 댓글

comment-user-thumbnail
2021년 10월 8일

유익하네요 ^^

답글 달기
comment-user-thumbnail
2021년 10월 10일

리액트 천재...

답글 달기
comment-user-thumbnail
2021년 10월 16일

안녕하세요 유익한 글 잘봤습니다! 공부중인 학생인데 코드 중에서 한가지 여쭤보고 싶어서 댓글 남깁니다.

이 부분인데, 객체의 키값으로 [***]을 넣는 방식을 처음보았습니다.
이렇게 [] 배열 생성 안에 값을 넣어서 JS 객체 키값을 설정하는 방식에 대해서 좀 더 찾아보려고 하는데 혹시 관련된 키워드나 검색어를 알려주실 수 있으실까요?

2개의 답글
comment-user-thumbnail
2021년 10월 18일

{ ...prevState, [e.target.name]: e.target.value } 처럼 쓰는 방식 뭔가 신선하네요!
저도 앞으로 이렇게 써야겠어요 ㅎㅎㅎ

답글 달기
comment-user-thumbnail
2021년 10월 18일

감사합니다

답글 달기