#4 React 이벤트 처리(리스너, onClick(핸들링 이벤트)

📍함수형 컴포넌트에서 이벤트를 처리하는 방법은 두가지

1) 리액트 훅인 useEffect에 이벤트 리스너 배치

2) html내에 onclick 속성 이용

 

☑️ 1) 리액트 훅인 useEffect에 이벤트 리스너 배치

• useEffect를 사용하여 컴포넌트가 마운트될 때 이벤트 리스너를 추가하고, 언마운트될 때 이를 제거하는 방식
• 주로 전역 이벤트(예: 스크롤, 키보드 이벤트 등)를 처리할 때 유용

useEffect(() => {
    const handleScroll = () => {
        console.log('Scrolling...');
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
}, []);

 

 

예시) 윈도우의 어느정도 위치가 되면 사라지기

const Nav = () => {

  const [show, setShow] = useState(false);

useEffect(() => {

    window.addEventListener("scroll", () => {

      if (window.scrollY > 50) {

        setShow(true);

      } else {

        setShow(false);

      }

    });

    return () => {

      window.removeEventListener("scroll", () => {});   //해당 컴포넌트가 사용되지 않는데 계속 실행되면 안되니까 리스너 제거 부분 

    };

  }, []);

  //[]안에 있으면 그게 변할 때 마다 실행되고 아니면 빈배열이면 컴포넌트가 딱 한번 실행

 

이벤트 리스너 : window.scrollY

 

☑️ 2) 핸들링 이벤트 

• JSX에서 직접 이벤트 핸들러를 설정하는 방법.  버튼 클릭과 같은 사용자 인터랙션에 자주 사용
• 리액트 엘리먼트에서는 각각 onClick, onMouseOver, OnSubmit, OnChange 등 카멜 케이스로 작성되어야 한다.

const handleClick = () => {
    console.log('Button clicked!');
};

return <button onClick={handleClick}>Click Me</button>;

 

☑️ 사용법

onClick = {( ) => {함수명()}}

onClick = {함수명}

(같은 것)

 

 

☑️ 실전 예시 1)  페이지 이동  (onClick) 

 

import React, { useEffect, useState } from 'react';

const handleAddButtonClick = () => {
    navigate('/SearchPage'); // SearchPage로 이동
  };
  
  
   <SearchIcon onClick={handleAddButtonClick}><FontAwesomeIcon icon={faSearch} /></SearchIcon>

 

- 오직 하나의 함수만 받을 수 있음 

 

 

 

☑️ 실전 예시 2)  페이지 이동 (onChange)

  const handleChange = (e) => {
    setSearchValue(e.target.value);
    // navigate(`/search?q=${e.target.value}`);
    console.log('e.target.value', e.target.value)
    
  }
  
  .
  .
  .
  
  <SearchInput value={searchValue}
        onChange={handleChange} placeholder="Search projects" />

- 이벤트를 객채로 받음 

- target : Input 태그

- value: Input의 value, 즉 작성한 값 

 

 

 

https://velog.io/@newsilver1028/React-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B2%98%EB%A6%AC-props-state-useState

[React] 이벤트 처리 - onClick(), useState

 

https://velog.io/@gyumin_2/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0