리액트 공식문서 스터디 3-1 주차

Responding to Events

이벤트 핸들러란?

사용자 상호작용(클릭, 호버, 포커스 등)에 반응하여 실행되는 함수

export default function Button() {
  function handleClick() {
    alert('You clicked me!')
  }

  return <button onClick={handleClick}>Click me</button>
}

이벤트 핸들러 정의 규칙

1. 기본 규칙

• 컴포넌트 내부에서 정의
• 네이밍: handle + 이벤트명 (예: handleClick, handleSubmit)
• 함수를 전달해야 함 (호출 X)

// 올바른 방식

<button onClick={handleClick}>
// 함수 참조 전달
<button onClick={() => alert('!')}>
// 인라인 화살표 함수

// 잘못된 방식

<button onClick={handleClick()}>
// 렌더링 시 즉시 실행됨

2. Props 접근

• 컴포넌트 내부에서 선언되므로 props에 자유롭게 접근 가능
• 부모 → 자식으로 이벤트 핸들러를 prop으로 전달 가능

3. 네이밍 컨벤션

이벤트 전파 (Event Propagation)

버블링

• React의 모든 이벤트는 상위로 전파됨
• 예외: onScroll은 해당 요소에서만 동작

전파 제어

// 전파 중단
e.stopPropagation()

// 캡처 단계에서 감지 (드물게 사용)
<div onClickCapture={() => { /* 자식보다 먼저 실행 */ }}>

수동 전파 호출 패턴

자식에서 작업 후 부모 핸들러를 명시적으로 호출

• 장점: 실행 흐름을 명확하게 추적 가능

기본 동작 방지

e.preventDefault()
// 브라우저 기본 동작 방지
// (예: form 제출 시 페이지 새로고침)

핵심 포인트

• 이벤트 핸들러는 순수 함수일 필요 없음 (side effect 허용)
• 디자인 시스템에서는 컴포넌트에 스타일만 포함하고, 동작은 props로 주입하는 것이 원칙

State: A Component's Memory

State란?

React에서 컴포넌트가 기억해야 할 값

State의 특징

1. 렌더링 간 유지

   • 상태는 렌더링 사이에도 유지됨
   • 변경될 때 컴포넌트를 다시 렌더링

2. 로컬 메모리

   • 컴포넌트 안에서만 접근 가능
   • 부모 컴포넌트가 자식의 상태를 직접 변경하거나 알 수 없음

3. 독립성

   • 하나의 컴포넌트에서 여러 개의 상태 변수 가능
   • 같은 컴포넌트를 두 번 렌더링하면, 각각 완전히 독립된 상태를 가짐

4. 상태 동기화

   • 두 컴포넌트의 상태를 동기화하려면?
   • → 자식 대신 부모에 상태를 두고 props로 내려주기