이벤트 핸들링

1. React 이벤트 개념

• 이벤트(Event): 웹 페이지에서 발생하는 사용자 행동(클릭, 입력, 마우스 이동 등)
• React는 브라우저 기본 이벤트가 아닌 합성 이벤트(Synthetic Event) 사용
• 합성 이벤트의 특징:
  • 브라우저 호환성이 뛰어남
  • 이벤트 위임으로 성능 최적화

2. React 이벤트 작성 규칙

구분	React	Html
문법	카멜 케이스	소문자
예시	onClick, onChange	onclick, onchange
이벤트 핸들러	함수 전달	문자열 전달

 

예시

<button onClick={handleClick}>클릭</button>

3. 기본 onClick 예제 (Header 클릭 시 알림)

App.js

function App() {
  return (
    <Header title="WEB" onChangeMode={() => { alert('Header 클릭'); }} />
  );
}

 

Header.js

function Header(props) {
  return (
    <header>
      <h1>
        <a href="/" onClick={(event) => {
          event.preventDefault();
          props.onChangeMode();
        }}>
          {props.title}
        </a>
      </h1>
    </header>
  );
}

• event.preventDefault() : 링크의 기본 이동 방지
• props.onChangeMode() : 부모가 전달한 함수 실행

4. onClick에 파라미터 전달 예제 (Nav 클릭 시 id 전달)

App.js

function App() {
  const topics = [
    {id: 1, title: 'html', body: 'html is...'},
    {id: 2, title: 'css', body: 'css is...'},
    {id: 3, title: 'javascript', body: 'js is...'}
  ];

  return (
    <Nav topics={topics} onChangeMode={(id) => { alert(id); }} />
  );
}

 

Nav.js

function Nav(props) {
  const lis = [];
  for(let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a href={'/read/' + t.id} onClick={(event) => {
          event.preventDefault();
          props.onChangeMode(t.id);
        }}>
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

props.onChangeMode(t.id): 클릭한 항목의 id를 부모로 전달

 

5. props + event 핸들링 구조 요약

부모 컴포넌트
 └─ props로 함수 전달
      └─ 자식에서 이벤트 발생
            └─ props로 받은 함수 실행

 

비교 요약

항목	설명
props	부모 → 자식 데이터/함수 전달
event	사용자 행동에 반응
props + event	자식 이벤트 발생 → 부모 함수 호출
목적	단방향 데이터, 컴포넌트 간 상호작용

 

6. 이벤트 객체(Event Object)

• 이벤트 핸들러의 첫 번째 매개변수
• event.target: 이벤트 발생한 DOM 요소
• 예시

<input type="text" onChange={(event) => {
  console.log('입력된 값:', event.target.value);
}} />

 

7. 클래스형 이벤트 처리 참고

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

 

8. 결론

• React 이벤트는 사용자의 상호작용을 반영하는 핵심 기능
• props와 event를 조합하면 부모-자식 간 동작 연결 가능
• 합성 이벤트로 브라우저 호환성과 성능이 보장됨

 

참고 링크
수업정리
https://gomgasali.notion.site/2-State-22fc4bc37f9780929ad5f5365ceba9b3?source=copy_link

React Hook 규칙 정리 (Rules of Hooks)

https://gomgasali.notion.site/React-Hook-Rules-of-Hooks-22fc4bc37f97804ab083c2697351e0ff?source=copy_link