[React] React 이벤트 핸들링

React의 이벤트 처리에 대해 좀 더 정리해보겠습니다.
사용자가 앱 또는 구성 요소와 언제 상호 작용하는지 어떻게 감지하는지 그런 이벤트에 따라 어떻게 반응하는지 이런 여러 이벤트에 대한 정리라고 볼 수 있을 것 같습니다.

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

[App.jsx]
import React from "react";

function App() {
  return (
    <div className="container">
      <h1>Hello</h1>
      <input type="text" placeholder="What's your name?" />
      <button>Submit</button>
    </div>
  );
}

export default App;

간단한 텍스트를 입력할 수 있는 input 태그와 button 태그를 만들어주었습니다.
우선 이 버튼을 누르게 되면 콘솔이 찍히거나 검은색으로 바뀌게끔 간단한 이벤트를 핸들링 해보겠습니다.

 

 

index.js

import React from "react";

function App() {
  
  function handleClick(){
    console.log("Clicked");
  }
  
  return (
    <div className="container">
      <h1>Hello</h1>
      <input type="text" placeholder="What's your name?" />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

export default App;

button 태그를 동작시키는 방법 중 흔히 알려져있는 onClick 속성을 통해 특정 동작을 수행하도록 해주었습니다.
버튼을 누르게 되면, handleClick() 함수가 동작되어 콘솔에 찍히게 됩니다.

 

 

결과

 

 

이번에는 콘솔이 찍히는 것이 아니라 Hello 헤드 태그의 내용을 실시간으로 바꾸는 이벤트 핸들링을 수행해보겠습니다.

 

index.js

import React, {useState} from "react";

function App() {
  
  const [headingText, setHeadingText] = useState("Hello");

  function handleClick(){
    setHeadingText("Submitted");
  }
  
  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

export default App;

버튼 태그에 적용시킨 onClick 함수는 그대로이나 동작 내용을 바꿔주었습니다.
실시간으로 렌더링된 내용을 바꾸기 위해서는 hook 기능인 useState를 사용해야 합니다.
따라서 React의 useState를 import 시켜주었습니다.

headingText는 이벤트가 적용될 헤드 태그의 텍스트 내용이고, useState 초기값은 Hello 로 지정해주었습니다.
setHeadingText 변수는 동작이 수행될 때 headingText에 반영될 내용을 가지고 있습니다.
handleClick 함수를 실행시키게 되면 setHeadingText에 수정시킬 내용을 넣어 headingText에 반영하게 되고, 해당 내용이 실시간으로 변동되는 것을 확인할 수 있습니다.

 

결과

 

 

이제 버튼에 커서를 올리거나 올리지 않았을 경우의 이벤트를 핸들링 해보겠습니다.

 

index.js

import React, {useState} from "react";

function App() {
  const [headingText, setHeadingText] = useState("Hello");
  const [isMouseOver, setMouseOver] = useState(false);

  function handleClick(){
    setHeadingText("Submitted");
  }
  
  function handleMouseOver(){
    setMouseOver(true);
  }

  function handleMouseOut(){
    setMouseOver(false);
  }

  const color = isMouseOver ? "black" : "white";

  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button 
      onClick={handleClick} 
      style={{backgroundColor: color}}
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      >Submit</button>
    </div>
  );
}

export default App;

저는 버튼의 색상을 실시간으로 바꾸는 이벤트를 만들어보겠습니다.
이 또한 실시간으로 적용되는 이벤트이므로 useState를 사용해야합니다.
시나리오는 이렇습니다.
마우스 커서의 행동에 따라 true, false 값을 부여하고 해당 값에 따라 버튼의 색상이 실시간으로 바뀝니다.

우선 useState를 하나 더 추가해줍니다.
isMouseOver 변수가 초기 값, 변경될 값이 적용될 초기 변수입니다.
setMouseOver 를 통해 요청받은 수정 값을 넣어주게 될 것입니다.
초기 useState 값은 false 입니다.
따라서 false 일 경우에 흰색이 나와야 합니다.

커서가 동작될 함수를 만들어줍니다.
handleMouseOver 함수는 커서가 버튼에 올라갔을 경우의 동작을 수행합니다.
true 값이 넣어질 것입니다.
handleMouseOut 함수는 커서가 버튼에서 벗어났을 경우의 동작을 수행합니다.
false 값이 넣어질 것입니다.

마우스 커서에 대한 이벤트를 수행하기 위해서는 onMouseOver, onMouseOut 속성이 필요합니다.
버튼에 onMouseOver, onMouseOut 를 추가해주고 각각 handleMouseOver, handleMouseOut 동작 함수를 넣어주었습니다.

이제 button 태그에 style 속성을 넣어주고 삼항 연산 조건부 렌더링을 적용시켜 현재 커서의 동작에 따라 isMouseOver 변수가 가진 true, false 값에 따라 흰색이 될 것인지 검은색이 될 것인지 판단 후 실시간으로 적용됩니다.

 

 

이렇게 해서 간단한 React에서 간단한 이벤트 동작 수행에 대해 알아보았습니다.
수많은 이벤트 동작들이 존재하기 때문에 이후 공부하면서 추가적으로 정리해보겠습니다.