onclick과 onchange

 return (
    <div>
      <button>안녕</button>
      <input type="text" ></input>
    </div>
  )

안녕 버튼과 인풋 태그를 만들어준다. 안녕 버튼을 누르면 콘솔 창에 '하세요'가 인풋창에 입력을 하면 'hi'가 출력되도록 할 것 이다. 아직 버튼을 누르면 클릭은 되지만 아무런 일도 일어나지 않는다. 인풋창에는 입력이 가능하다.

      <button onClick={sayHello}>안녕</button>

onClick={sayHello}는 클릭하면 sayHello로 가시오.라는 뜻이다.

  const sayHello = () => {
    console.log('하세요');
  }

콘솔창에 '하세요'가 찍히게 되는 sayHello라는 이름의 상수를 선언한다.





안녕 버튼을 누르면 콘솔창에 '하세요'가 찍힌다. 다섯 번 눌렀더니 저렇게 됐다.

  const changeText = () => {
    console.log('hi')
  }

      <input type="text" onChange={changeText}></input>

인풋태그도 똑같이 해준다. 단, 인풋의 경우에는 onClick이 아닌 onChange를 써준다.


인풋창에 값을 입력했더니 hi가 출력된다.


하지만 여기서 끝이 아니다!!!!
인풋의 경우 단순히 입력 받는 것이 아닌 입력받은 값을 저장해놓아야 써먹을 수 있다. 저번에 공부했던 state를 써서 저장할 것 이다.

  const [sayHi, setSayHi] = useState("");

  const changeText = (e) => {
    console.log('hi');
    console.log(e.target.value);
    setSayHi(e.target.value);
  };

  return (
    <div>
      <button onClick={sayHello}>안녕</button>
      <input type="text" value={sayHi} onChange={changeText}></input>
    </div>
  );

onChange 할 경우 changeText로 가게되고 값은 sayHi에 저장된다. 그리고 changText에서는 콘솔창에 hi와 저장 된 값이 찍힌다.


<최종 코드>

import React,{useState} from "react";

const Login = () => {

  const [sayHi, setSayHi] = useState("");

  const sayHello = () => {
    console.log('하세요');
  };

  const changeText = (e) => {
    console.log('hi');
    console.log(e.target.value);
    setSayHi(e.target.value);
  };

  return (
    <div>
      <button onClick={sayHello}>안녕</button>
      <input type="text" value={sayHi} onChange={changeText}></input>
    </div>
  );
};

export default Login;

맨 처음 공부할 때는 정말 이해가 안되고 어려웠는데 다시 복습하면서 정리하니까 조금은 이해가 되는 것 같다. 하지만 아직도 완벽하게 이해하지는 못했다. 이 내용은 자동으로 외워질 정도로 많이 써먹는 내용이라고 한다 허거덕