useState()로 간단한 이벤트를 처리해보자!

컴포넌트 안에 메서드를 만들어서 간단한 이벤트를 처리해보자!

위와 같은 화면이 있고 요구사항으로는

 

1. 입력 버튼에 마우스가 올라가면 색이 변해야 한다.

2. 마우스가 버튼에서 나가면 색은 다시 돌아와야 한다.

3. 이름을 입력하고 버튼을 누르면 "안녕하세요"가 "감사합니다"로 변해야 한다.

 

우선 1, 2번을 해결해보자!

import React, { useState } from "react";

function App() {
  const [isMousedOver, setMouseOver] = useState(false);

  function handleMouseOver() {
    setMouseOver(true);
  }

  function handleMouseOut() {
    setMouseOver(false);
  }

  return (
    <div className="container">
      <h1>안녕하세요.</h1>
      <input type="text" placeholder="이름을 입력하세요." />
      <button
        style={{ backgroundColor: isMousedOver ? "black" : "white" }}
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
      >
        입력
      </button>
    </div>
  );
}

export default App;

우선 버튼에 이벤트를 넣어주자!

 

버튼에 마우스가 들어오면 이벤트가 발생해야 하니까 onMouseOver 그리고 마우스가 나가면 또 이벤트가 발생해야 하니까 onMouseOut을 설정해 주었다.

 

이벤트가 발생하면 버튼의 style 속성을 변경해주는 방식으로 만들었다.

 

버튼의 style 속성을 보면 삼항연산자를 이용해서 isMousedOver라는 boolean 변수의 값을 확인해서 배경색을 변경하는 걸 알 수 있다.

 

그리고 isMousedOver 변수의 값은 이벤트 처리 메서드에서 변경이 이루어진다.

 

먼저 useState()를 사용해야 하니까 import를 해주고, 기본값인 false를 넣어서 isMousedOver와 setMouseOver 메서드를 선언해준다.

 

그런 다음 handleMouseOver 메서드에서는 버튼의 배경색이 검정으로 변해야 하니까 setMouseOver로 isMousedOver의 값을 true로 세팅해준다.

 

반대로 handleMouseOut 메서드에서는 버튼의 배경색을 원래대로 돌려야 하기 때문에 isMousedOver의 값을 false로 변경해준다.

 

모든 적용이 끝나고 이벤트가 잘 돌아가는지 확인해 보았다!

성공!!!

 

물론 css에서 hover 처리를 해주면 좀 더 간단할 수 있지만! 리액트의 useState()를 연습하기 위해 이런 방식으로 이벤트를 처리했다!

 

다음은 이름을 입력하면 "안녕하세요"에서 "감사합니다"로 바꾸는 이벤트를 처리해보자!

 

import React, { useState } from "react";

function App() {
  const [heading, setHeading] = useState("안녕하세요."); //추가
  const [isMousedOver, setMouseOver] = useState(false);

  function handleClick() { //추가
    setHeading("감사합니다.");
  }

  function handleMouseOver() {
    setMouseOver(true);
  }

  function handleMouseOut() {
    setMouseOver(false);
  }

  return (
    <div className="container">
      <h1>{heading}</h1> //추가
      <input type="text" placeholder="이름을 입력하세요." />
      <button
        style={{ backgroundColor: isMousedOver ? "black" : "white" }}
        onClick={handleClick}
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
      >
        입력
      </button>
    </div>
  );
}

export default App;

useState()를 사용하는 방식은 같다

 

"안녕하세요"로 초기화 시킨 useState를 heading, setHeading에 넣어준다.

 

h1 태그에는 heading 변수를 넣어주고 화면을 확인하면 변화가 없다! 그러면 잘 된 거다!

 

버튼에 onClick 이벤트를 설정해준다. handleClick 메서드에서는 setHeading으로 변경될 값인 "감사합니다"를 넣어주면 이벤트 설정은 완료!

한국인의 영원한 디폴트 이름인 홍길동을 넣어주고 입력 버튼을 누르면!

 

안녕하세요는 어디 갔는지 찾아볼 수 없고 감사하다는 겸손한 리액트의 자세를 볼 수 있다!!