이 글은 MZ's Devlog 로 이전됐습니다.

💡 들어가며

벨로퍼트와 함께하는 모던 리액트의 input 상태 관리하기와 여러개의 input 상태 관리하기를 읽고 정리한 글입니다.

input 관리하는 방법, 불변성을 지키며 여러 개의 input 객체로 관리하는 방법에 대해 정리했습니다.

사용자에게 이름과 닉네임을 입력받는 예제를 사용했습니다.

📝 useState의 개념

컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 useState 를 사용할 수 있습니다.

Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다.

useState 는 리액트의 Hooks 중 하나입니다.

🎯 이벤트 등록하기

이벤트에 등록하는 함수에서는 이벤트 객체 e 를 파라미터로 받아와서 사용할 수 있습니다.

이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가리키게 됩니다.

이 DOM 의 value 값, 즉 e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있습니다.

값 하나를 입력받는 InputSample 컴포넌트를 통해 알아보겠습니다.

🔎 InputSample.js Code

e.target.value 로 input 값에 접근한 후 setText 를 통해 text 값을 업데이트했습니다.

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;

💻 실행 결과

입력한 값을 값: {text} 부분에서 확인할 수 있습니다.

......

새로운 블로그에서 글 전체 내용을 확인하실 수 있습니다.