input 상태 관리

input 에 입력하는 값이 하단에 나타나고, 초기화 버튼을 누르면 input 이 값이 비워지도록 구현

import React from "react";

function InputSample() {
  const onChange = (e) => {
    console.log(e.target); // <input>
    console.log(e.target.value); // input에 입력하는 값 출력 
  };
  return (
    <div>
      <input onChange={onChange} />
      <button>초기화</button>
      <div>
        <b>값: </b>
        input에 입력하는 값 출력
      </div>
    </div>
  );
}
export default InputSample;

input의 onChange 이벤트
이벤트 객체 e : 수정 이벤트가 발생할 때 내용을 파라미터로 받아와 사용할 수 있다.
객체 안에 있는 e.target은 현재 이벤트가 발생한 DOM에 대한 정보(현재는 input DOM)를 가리킨다. 그리고 e.target.value를 사용하면 이 DOM의 value값을 알 수 있다.

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>값: </b>
        {text}
      </div>
    </div>
  );
}
export default InputSample;

input 의 상태를 관리할 때 input 태그의 value 값도 설정해주는 것이 중요하다. 그렇게 해야 상태가 바뀌었을 때 input의 내용도 업데이트가 가능하다.

여러개의 input 상태 관리

input의 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 방법을 사용한다. 이때 useState에서 문자열이 아닌 객체 형태로 관리해준다.

import React, { useState } from "react";

export default function InputTest() {
  const [inputs, setInputs] = useState({ name: "", nickname: "" });
  // 객체 형태로 관리

  const { name, nickname } = inputs;
  // 나중에 이 값을 쉽게 사용할 수 있도록 비구조화 할당으로 추출
  
  const onChange = (e) => {
    const { name, value } = e.target; 
    //  e.target으로 name과 value를 먼저 추출
    setInputs({
      ...inputs, // 객체를 업데이트할 때는, 기존의 객체를 먼저 복사
      [name]: value, // name 키를 가진 값을 value로 설정 
    });

    console.log(e.target.name);
    console.log(e.target.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>
  );
}

객체 상태를 업데이트 할 때는 기존 객체 상태를 복사 후 업데이트 함으로써 불변성을 지킨다. 불변성을 지켜주어야 리액트 컴포넌트에서 상태가 업데이트 됐음을 감지하고, 필요한 렌더링을 진행하게 된다.