리액트 input 태그 상태 관리법 - React

React JS

 

React - input 상태 관리법

---

input 상태 관리

리액트에서는 input의 값을 사용하기 위해 state를 지정하고 변경 또한 이 state 값을 변경해서 사용해야 합니다.

 

위와 같은 기능을 하는 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>
  );
}

• input의 value가 변할 때마다 onChange 이벤트를 통해 값을 변경합니다. (이벤트를 입력하지 않으면 입력 권한이 없어 입력이 불가능)
• input에 입력된 값을 쉽게 가져오기 위해 value 프로퍼티도 작성해주어야 합니다. 

 

여러 개의 input 상태 관리법

그렇다면 여러개의 input을 관리해야 할 때는 어떤 방식이 효율적일까요. 물론 여러개의 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; // 우선 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>
  );
}

여기서 사용한 ... 문법은 spread 문법입니다. 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사해줍니다.

 

바닐라 자바스크립트보다 조금 복잡하지만 인풋 값 프로퍼티를 쉽게 다룰 수 있기에 리액트가 인기 있는 라이브러리가 아닐까 생각합니다.