[React] input 상태 관리

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.useState 를 통한 input 관리

useState는 상태 변수와 상태를 업데이트하는 함수를 반환합니다.
상태가 업데이트되면, 리액트는 해당 컴포넌트를 다시 렌더링하여 새로운 상태 값을 반영합니다.

다음 함수는 onChange 함수를 정의하여 input란이 업데이트되면 text값이 다시 렌더링되어 반영된다.

onChange함수의 e.target.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>값: {text}</b> {/* 현재 입력된 값을 표시 */}
      </div>
    </div>
  );
}

export default InputSample;

 

 

 

2.여러개의 input 상태 관리

import React, { useState } from 'react';

function InputSample() {
  // 초기 상태를 객체 형태로 설정
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  // 비구조화 할당을 통해 상태 변수에서 값 추출
  const { name, nickname } = inputs;

  // 입력 필드 변경 핸들러 함수
  const onChange = (e) => {
    // 이벤트 객체에서 name과 value 추출
    const { value, name } = e.target;

    // 상태 업데이트
    setInputs({
      ...inputs, // 기존의 inputs 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value로 설정
    });
  };

  // 초기화 버튼 클릭 핸들러 함수
  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    });
  };

  return (
    <div>
      <input
        name="name" // 입력 필드의 name 속성
        placeholder="이름" // 입력 필드의 placeholder 속성
        onChange={onChange} // onChange 이벤트 핸들러 설정
        value={name} // 입력 필드의 value 속성
      />
      <input
        name="nickname" // 입력 필드의 name 속성
        placeholder="닉네임" // 입력 필드의 placeholder 속성
        onChange={onChange} // onChange 이벤트 핸들러 설정
        value={nickname} // 입력 필드의 value 속성
      />
      <button onClick={onReset}>초기화</button> {/* 초기화 버튼 */}
      <div>
        <b>값: </b>
        {name} ({nickname}) {/* 현재 입력된 값을 표시 */}
      </div>
    </div>
  );
}

function App() {
  return (
    <InputSample /> // InputSample 컴포넌트를 렌더링
  );
}

export default App;

 

 

 

 

2-1.상태 변수 선언

inputs: 입력 필드의 값을 저장하는 상태 변수입니다. 객체 형태로 name과 nickname 필드를 가지고 있습니다.
setInputs: 상태를 업데이트하는 함수입니다.

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

 

 

 

 

2-2.비구조화 할당을 통해 값 추출

inputs 객체에서 name과 nickname 값을 추출하여 별도의 변수로 사용합니다.
(비구조화 안할시
const name = inputs.name;
const nickname = inputs.nickname;)

const { name, nickname } = inputs;

 

 

 

2-3.입력 필드 변경 핸들러 함수

const { value, name } = e.target; 비구조화 할당을 사용하여 e.target 객체에서 value와 name 속성을 추출합니다.

...inputs 는 스프레드 연산자를 사용하여 기존의 inputs 객체를 복사합니다. 

[name]: value 는 대괄호 문법을 사용하여 동적으로 속성 이름을 설정합니다. 그뒤 value에 키에 대응하는 값을 새로 설정합니다.

(inputs[name] = value;  이런 방식으로 사용 XXXX)

 

const onChange = (e) => {
  const { value, name } = e.target; // 이벤트 객체에서 name과 value 추출
  setInputs({
    ...inputs, // 기존의 inputs 객체를 복사한 뒤
    [name]: value // name 키를 가진 값을 value로 설정
  });
};

 

 

2-4.초기화 버튼 클릭 핸들러 함수

setInputs 함수는 name과 nickname 값을 빈 문자열로 설정하여 입력 필드를 초기화합니다.

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

 

 

2-5.렌더링

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>
);