[React Hooks] input onChange 사용법 (onChange)사용 예시

https://wonyoung2257.tistory.com/4

[[React] input onChange 사용법 (onChange)사용 예시

이 글은 class로 작성하였는데 Hook을 사용하여 input을 받는 것으로 리뉴얼하겠다.

---

1. Example2.js

import { useState } from "react";

const Example2 = () => {
  const [text, setText] = useState("텍스트");

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

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

export default Example2;

함수형 컴포넌트에는 state를 useState라는 hooks를 사용하여 제어한다.

const [text, setText] = useState("텍스트");

• text 는 this.state.text 같이 값을 가져온다
• setText는 this.setState 처럼 값을 할당할 때 사용한다. setText는 함수이다.
• useState() 괄호 안에는 초기화 하는 값을 설정한다.

위 문법은 구조분해할당자이다. 이해가 안되면 아래의 링크를 참고해라
구조분해할당자

구조 분해 할당 - JavaScript | MDN

실행이미지

---

기존의 글이 class로 적혀있어서 hooks로 바꾸는 글을 간단히 적어보았다.
아주 기본적으로 간단히 만들었으니 더욱 자세한 내용은 꼭 찾아서 공부하도록하자!!