항해99 TIL [12/4]

6주간 어떻게 달려왔는지도 모를 실전 프로젝트와 발표까지 끝나고 맞은 토요일은 너무나 달콤했다. 오늘은 별다른 일을 하지 않고, 그저 다면평가 및 다음 주부터 시작될 스케쥴을 생각해보는 시간과 이전에 공부하던 것들을 정리하는 시간을 가져보기로 했다.

여러개의 input 상태 관리하기 (React)

▶ InputSample.js 1

import React, { useState } from 'react';

function InputSample() {
  const onChange = (e) => {
  };

  const onReset = () => {
  };


  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="닉네임" />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        이름 (닉네임)
      </div>
    </div>
  );
}

export default InputSample;

input 의 개수가 여러개가 됐을 때는 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현 가능하지만 그것보다는, input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이 더 좋음. 또, useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 함.

▶ InputSample.js 2

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

리액트 상태에서 객체를 수정해야 할 때는

inputs[name] = value;

이런식으로 직접 수정하면 안되며 대신 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 함.

setInputs({
  ...inputs,
  [name]: value
});

여기서 사용한 ... 문법은 spread 문법으로, 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사해줌. (참고링크)

이러한 작업을, "불변성을 지킨다" 라고 부름. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행됨. 만약 inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않음. 또한 리액트에서는 불변성을 지켜주어야 컴포넌트 업데이트 성능 최적화도 가능함.