[React] 함수타입 hook onChange 사용하기

이번시간에는 함수타입에 hook으로 onChnage 사용 방법에 대해 알아보도록 하겠습니다.

 

방법은 총 2가지에 대해 설명 드리도록 하겠습니다.

 

① Input이 한개의 경우

② Input이 여러개의 경우

 

Step. 1 (Input이 한개의 경우)

 상태 변수 만들기

  const [text, setText] = useState('');

onChange 함수 만들기

  const onChange = (event) => {
    console.log('onChange Event', event);
    setText(event.target.value);
  };

전체 코드

import React, { useState } from 'react';

export default function Index() {
  const [text, setText] = useState('');

  const onChange = (event) => {
    console.log('onChange Event', event);
    setText(event.target.value);
  };

  return (
    <div>
      <div>
        <input onChange={onChange} value={text} />
      </div>
      <div>{text}</div>
    </div>
  );
}

 

Step. 2 (Input이 여러개의 경우)

 상태 변수 만들기

  const [inputValues, setInputValues] = useState({
    username: '',
    password: '',
  });

onChange 함수 만들기

  const handleOnChange = (event) => {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  };

전체 코드

import React, { useState } from 'react';

const Test = () => {

  const [inputValues, setInputValues] = useState({
    username: '',
    password: '',
  });

  const handleOnChange = (event) => {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  };

  return (
    <div>
      <input onChange={handleOnChange} value={inputValues.username} name="username" />
      <input onChange={handleOnChange} value={inputValues.password} name="password" />
    </div>
  );
};

export default Test;

 

수고하셨습니다.