• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 검색

React – 이벤트와 폼 – 이벤트 처리 – 0 – 기본 이벤트 처리 방식 (onClick 등)

안녕하세요 여러분 
이번에는 React에서 이벤트를 처리하는 기본 방식에 대해 함께 배워보려고 해요!
HTML에서는 xss-onclick="..." 처럼 문자열로 이벤트를 처리했지만, React에서는 좀 더 JavaScript에 어울리는 방식으로 다뤄요.

마치 우리가 버튼을 누르면 기계가 정해진 동작을 수행하듯
React 컴포넌트 안에서도 “이벤트”를 감지해서 특정 함수를 호출하게 되는 구조랍니다!

1. React의 이벤트 처리 방식이란?

 HTML vs React 비교

React에서는 이벤트 이름이 소문자 → 낙타표기법(camelCase) 으로 바뀌고,
실제로 이벤트 핸들러로 함수를 넘긴다는 점이 핵심입니다!

2. 기본 onClick 이벤트 예시

function HelloButton() {
  const handleClick = () => {
    alert('안녕하세요! ');
  };

  return (
    <button onClick={handleClick}>인사하기</button>
  );
}

• handleClick이라는 함수를 만들고
• JSX에서 onClick={함수이름} 형태로 이벤트 등록

 버튼을 누르면 alert이 실행돼요!

3. 다양한 이벤트 종류들

React에서는 브라우저의 거의 모든 이벤트를 처리할 수 있어요.

4. 이벤트 객체 사용 (e)

React에서는 이벤트가 발생했을 때 이벤트 객체(e) 를 받아서
더 세밀한 제어를 할 수 있어요!

예제: 클릭 좌표 알아내기

function CoordinateButton() {
  const handleClick = (e) => {
    alert(`마우스 좌표: X=${e.clientX}, Y=${e.clientY}`);
  };

  return (
    <button onClick={handleClick}>좌표 확인</button>
  );
}

• e는 SyntheticEvent라는 React 전용 이벤트 객체
• e.clientX, e.clientY로 마우스 위치 확인 가능!

HTML에서의 이벤트 객체와 거의 비슷하지만, React에서 성능 최적화를 위해 약간 감싸진 객체예요!

5. 인자 전달하기 (함수 안에서 매개변수 전달)

이벤트 핸들러에 인자를 넘기고 싶을 땐 화살표 함수로 감싸야 해요!

 잘못된 방식

// 이렇게 쓰면 컴포넌트 렌더 시점에 바로 실행됨
<button onClick={myFunc(param)}>실행</button>

 올바른 방식

<button onClick={() => myFunc(param)}>실행</button>

예제

function ProductButton({ product }) {
  const handleBuy = (name) => {
    alert(`${name} 상품을 구매합니다!`);
  };

  return (
    <button onClick={() => handleBuy(product.name)}>구매하기</button>
  );
}

6. 이벤트 기본 동작 막기 (preventDefault)

form을 제출하면 새로고침되죠? React에서는 그 기본 동작을 막아야 해요!

function SubmitForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert('폼이 제출되었습니다!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="이름 입력" />
      <button type="submit">제출</button>
    </form>
  );
}

• e.preventDefault()로 기본 동작 차단
• React에서는 이걸 꼭 직접 막아줘야 해요

7. 여러 이벤트 핸들러 사용하기

여러 개의 이벤트를 같은 컴포넌트에서 처리할 수 있어요.

function EventBox() {
  const handleFocus = () => console.log('포커스 됨!');
  const handleBlur = () => console.log('포커스 잃음!');
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      alert('Enter 입력됨!');
    }
  };

  return (
    <input
      onFocus={handleFocus}
      onBlur={handleBlur}
      onKeyDown={handleKeyDown}
      placeholder="입력해보세요"
    />
  );
}

이처럼 마우스, 키보드, 포커스 이벤트 등을 자유롭게 조합할 수 있어요!

8. 컴포넌트에 이벤트 함수 나눠서 정리하기

컴포넌트가 길어지면 이벤트 핸들러를 분리해서 가독성을 높여야 해요!

function UserActions() {
  const handleLogin = () => console.log('로그인 시도!');
  const handleLogout = () => console.log('로그아웃!');

  return (
    <div>
      <button onClick={handleLogin}>로그인</button>
      <button onClick={handleLogout}>로그아웃</button>
    </div>
  );
}

함수로 분리해두면 테스트도 쉽고 유지보수도 훨씬 좋아요!

 마무리 요약