[TIL] useState

1. Input 상태관리

import React, { useState } from 'react';
function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

• 위 코드는 input에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input값이 reset되도록 구현한 것이다.

• input의 onChange 이벤트를 사용히고 이벤트에 등록하는 함수에는 이벤트 객체e를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e.target은 이벤트가 발생한 DOM인 input DOM을 가르킨다.

• 이 DOM의 value값, 즉 e.target.value를 조회하면 현재 input에 입력한 값이 무언인지 알 수 있다. 또한 이 값을 useState를 통하여 관리 해주면 된다.

2. 여러개의 Input상태관리

• Input의 개수가 여러개 일때는, 단순히 useState를 여러번 사용하고 onChange도 여러개 만들어서 구현 할 수 있지만 그 방법은 좋은 방법이 아니기때문에 input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다. 그리고 useState에서는 문자열이 아니라 객체 형태의 상태로 관리해주어야 한다.

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; 
    setInputs({
      ...inputs,  // 기존의 input 객체 복사(?)
      [name]: value // name 키를 가진 값을 value로 설정
    });
  };

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


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

export default InputSample;

2.1 정확히 이해해야할 부분

inputs[name] = value;

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

• 리액트 상태에서 객체를 수정해야 할 때에는, 첫 번째 줄 처럼 직접 수정하면 안된다. 대신에 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 한다.

• 네 번째 줄에서 사용한 ...은 spread 문법인데, 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사해주는 역활을 해준다. 이러한 작업을, "불변성을 지킨다" 라고 말하고 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행된다.
  만약에 첫 번째 줄처럼 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않는다.

3. 참조

https://react.vlpt.us/basic/08-manage-input.html
https://react.vlpt.us/basic/09-multiple-inputs.html