리액트에서 여러 input 태그 다루기

김민준 님의 '리액트를 다루는 기술'을 참고하여 작성한 글입니다.

배열 비구조화 할당

const user = ['sola', 'jin'];
// user 배열 안에 있는 값을 userOne과 userTwo에 담는 일반적인 방법
const userOne = user[0];
const userTwo = user[1];
// 배열 비구조화 할당을 사용한 방법
const [userOne, userTwo] = user;

리액트의 useState에서의 비구조화 할당

const [word, setWord] = useState('');

useState 함수의 인자에는 상태의 초기값이 들어간다. 타입은 어느 것이든 상관없다. 함수를 호출하면 배열이 반환된다. 배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 Setter 함수다. 배열 비구조화 할당을 통해 이름은 자유롭게 정할 수 있다.

input 여러 개 다루기

input 태그가 많을 때, input 값을 state에 넣기 위해 여러 개의 메서드를 만들어도 되지만, event 객체를 활용하면 더 쉽게 할 수 있다.

import React, { useState } from "react";

const EventPractice = () => {
  const [form, setForm] = useState({
    name: "",
    city: "",
  });
  const { name, city } = form;// 객체 비구조화 할당을 통해 form 객체에서 바로 값을 추출할 수 있다
  const onChange = (e) => {
    const nextForm = {
      ...form, // {1}
      [e.target.name]: e.target.value, // {2}
    };
    setForm(nextForm); // {3}
  };
 
  return (
    <div>
      <h1>my amazing title</h1>
      <input
        type="text"
        name="name"
        placeholder="이름을 입력하세요"
        value={name}
        onChange={onChange}
      ></input>
      <input
        type="text"
        name="city"
        placeholder="도시명을 입력하세요"
        value={city}
        onChange={onChange}
      ></input>
    </div>
  );
};

export default EventPractice;

 

위 코드 {2} 에서 e.target.name 값을 사용했는데, e.target.name은 해당 input 태그의 name을 가리킨다. {2} 처럼 객체에서 키를 [ ]로 감싸면 그것이 가리키는 실제 값이 그 자리에 들어온다. 위 예에서는 name 또는 city가 들어오게 될 것이다. 이처럼 각 input 태그에 name 속성을 통해 이름을 붙이고, state를 업데이트 할 때는 {1} 처럼 nextForm 객체에 spread 연산자를 사용해서 이전 상태 값을 복사하고, {2} 업데이트 하려는 상태만 덮어쓴 뒤 {3} Setter함수의 인자로 전달해준다.

이전 상태를 복사해서 새롭게 객체를 반환하는 이유는, 리액트에서는 불변성을 유지해주는 것이 성능관리에 도움이 되기 때문이다.