React - input 관리

목차

• Introduction
• 하나의 input 상태관리
• 여러개의 input 상태관리
• Conclusion

📌 Introduction

안녕하세요. 오늘은 react에서의 input관리에 대해서 알아보겠습니다. vue에서는 깔끔하게 v-model로 관리를 할 수 있지만 react에서는 해당 기능이 없어 조금 복잡하지만 잘 설명을 해보겠습니다.🎉

📌 하나의 input 상태관리

일단 하나의 input 상태관리는 비교적 쉽습니다. useState를 이용하여서 text를 바꿔주고 value로 연결을 시켜주면 됩니다.

import React, { useState } from "react";

function InputSample() {
  const [text, setText] = useState("");

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

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

  return (
    <div>
       // ⭐️ 바로 이렇게 상태를 관리해볼수 있어요 !
      <input onChange={onChange} value={text} />
      <button onClick={initText}>init</button>
      <div>
        <b>value: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

📌 여러개의 input 상태관리

여러개의 상태를 관리할때는 useState를 객체로 관리를 합니다.

import React, { useState } from "react";

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

  const { name, nickname } = inputs;

  const onChange = (e) => {
    // ⭐️ input에서 설정한 name이 들어오게 되어있어요.
    const { name, value } = e.target;

    // 객체 상태를 업테이트 할때는 불변성을 지켜줘야 합니다.
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const initText = () => {
    setInputs({
      name: "",
      nickname: "",
    });
  };

  return (
    <div>
      <input
        // 이부분에서 name을 설정을 해줘야합니다.
        name="name" 
        placeholder="name" 
        onChange={onChange} 
        value={name} 
      />
      <input
        name="nickname"
        placeholder="nickname"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={initText}>init</button>
      <div>
        <b>value: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

📌 Conclusion

이렇게 input을 관리를 하는 법에 대해서 한번 알아봤습니다. 새삼 v-model이 그리워지는 순간이 오네용. 그럼 다음 포스팅에서 만나요 안녕!