230306 숙달을 위한 메모: 이벤트 처리 기본 편

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

0. 브라우저 이벤트, 이벤트 핸들러

가령 사용자가 웹사이트 상에서 버튼을 클릭했다면, 그때는 click 이벤트가 발생하고, 우리는 이 click 이벤트가 발생했을 때 실행할 코드를 설정할 수 있다. 이벤트 발생에 따라 실행될 함수를 설정하는 것을, 이벤트 핸들러 를 할당한다고 말한다.

자바스크립트에서 이벤트 핸들러의 할당은 html 태그에 on이벤트 = "실행될함수" 속성을 설정해주는 것으로 할 수 있다.

// JS에서 사용하는 방법
<button onclick="alert()"> Alert Button in JS </button>

// React에서 하는 방법
<button onClick={alert}> Alert Button in React </button>

코드블럭을 비교 했을 때 React의 특징은 아래와 같다

1. jsx 형태로 {} 안에 이벤트 핸들러를 명시: {alert}
2. 이벤트 핸들러는 () 없이 함수명만 (즉, 함수 그 자체를) 명시: alert
3. 카멜 케이스로 이벤트 속성을 명시: onClick

---

1. 조건부 랜더링

조건부 랜더링은 어떤 액션을 하면, 그 해당 액션에 대한 결과 값을 보여주겠다는 랜더링 방식인데, 아래 예시를 보며 React에선 어떻게 조건부랜더링을 할 수 있는지 알아보자

예시. 버튼 클릭 시 메뉴 표시하기

구현 과정
1. 클릭 여부 저장용 state 만들기
2. 해당 state 의 값을 토대로, 삼항연산자를 사용해 요소를 표시하기

// react의 내장메소드 useState불러오기
import React, { useState } from 'react'

// rfce를 이용해 Menu함수 만들기
function Menu() {
	// useState를 활용하기 위한 요소 갖추기
    const [isClicked, setIsClicked] = useState(false);
    
    const toggleMenu = () => {
         setIsClicked(!isClicked);
    }
// isClicked 가 true 일때만 ‘메뉴가 펼쳐집니다!!’ 가 표시
// {} 내부 부분은 자바스크립트와 동일한 문법으로 작성해야한다!
    return (
        <div>
            {isClicked ? <div> 메뉴가 펼쳐집니다!!</div> : <></>}
            <button onClick={toggleMenu}>{isClicked ? '메뉴 닫기' : '메뉴 펼치기'}</button>
        </div>
    )
  // onClick메소드에 toggleMenu함수이벤트를 부르고, 삼항연산자를 활용해 메뉴가 열리고 닫히도록
}

export default Menu

---

2. 이벤트 객체, 이벤트 위임

이벤트 객체는 브라우저에서 이벤트 발생 시, 생성되는 이벤트 상세정보가 담긴 객체를 말한다. 이걸 사용하려면 e 또는 event라는 인자를 넣어주면 된다.

    const toggleMenu = (e) => {
    	 console.log(e);
         setIsClicked(!isClicked);
    }

위 코드블럭 처럼 e를 console.log메소드를 활용해 toggleMenu함수에 적어주면, 브라우저 콘솔에 여러 정보들이 출력되는데, 그 중 알아두면 좋을 정보들은 아래와 같다.

- target : 이벤트가 처음 발생한 대상
- currentTarget : 현재 이벤트가 위치하고 있는 대상
- clientX : 브라우저 상에서 이벤트가 발생한 좌표
- clientY :  브라우저 상에서 이벤트가 발생한 좌표
- type : 이벤트의 타입 (click 등)

때문에 console.log에 아래 처럼 작성한다면

const toggleMenu = (e) => {
    console.log(e.target)
}

// 유저가 어떤 버튼을 클릭(이벤트가 발생)했는지 표시된다