[리액트 공식문서] 상호작용성 더하기 - (1) 이벤트에 응답하기

이벤트 핸들러란 무엇일까요? 사용자 상호작용에 따라 실행되는 사용자 정의 함수 입니다. 이를 사용하기 위해서 다음 단계를 거칩니다.

 

1. 사용할 함수를 컴포넌트 내에 선언한다.

2. 함수 내부 로직을 구현한다.

3. JSX의 onClick 속성에 함수를 추가한다.

 

 

이러한 이벤트 핸들러에는 중요한 특징이 몇가지 있습니다.

 

1. 컴포넌트 내부에서 선언합니다.

• 따라서 이벤트 핸들러는 해당 컴포넌트의 prop에 접근할 수 있습니다.
• 이벤트 핸들러를 선언할 때 JSX와 구분하거나, JSX 내에서 인라인으로 사용하거나, 화살표 함수를 사용할 수 있습니다.

 

2. "handle" 로 시작한 명명법이 일반적입니다.

 

 

3. 이벤트 핸들러로 전달한 함수들은 호출이 아닌 "전달"입니다.

• 만약 <button onClick={handleClick()}> 과 같이 괄호를 붙인다면, 렌더링 과정 중에서 즉시 함수가 실행됩니다.
• 따라서 괄호를 제거하거나, 화살표 함수를 사용합니다.

 

4. 이벤트 핸들러는 prop으로 전달할 수 있습니다.

 

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}!`);
  }

  return (
    <Button onClick={handlePlayClick}>
      Play "{movieName}"
    </Button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
    </div>
  );
}

 

• 이 성질을 이용하여 디자인 시스템을 정의할 수 있습니다.
• 버튼과 같은 컴포넌트는 일반적으로 동작을 지정하지 않고 스타일만 지정하며, 이를 JSX 내에서 사용하는 다른 컴포넌트가 이벤트 핸들러를 전달하도록 합니다.

 

 

5. 이벤트 핸들러 prop는 관습적으로 on으로 시작하는 명명법이 있습니다.

• 빌트인 컴포넌트(div, button 등)는 브라우저 이벤트 이름만 지원합니다. ex) onClick, ref, style 등
• 사용자 정의 컴포넌트는 이벤트 핸들러 prop의 이름을 원하는 대로 정의할 수 있습니다.

 

 

6. 이벤트 핸들러에 적절한 HTML 태그를 사용해야 합니다.

물론 CSS와 JS를 사용한다면, 모든 HTML 요소들을 div로만 만들 수 있습니다. 하지만 작업에 올바른 HTML 요소를 사용하는 것이 좋습니다. 이를 시멘틱 마크업 이라고 합니다.

• 키보드 접근성이 내장되어 있어, tab 등의 키를 이용해 버튼을 이동하거나 활성화할 수 있습니다.
• 파일 사이즈가 가볍고 반응형으로 바꾸기 쉬워 모바일 환경을 지원하기에 더 적합합니다.
• 검색 엔진은 태그 내부 키워드에 더 많은 가중치를 부여하기 때문에, SEO에 좋습니다.

스크린 리더를 사용한다면 시멘틱 마크업을 적용한 페이지들을 보다 자세하게 테스트할 수 있습니다. 적용한 코드 예시는 다음과 같습니다.

 

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<ol>
  <li>Here is</li>
  <li>a list for</li>
  <li>you to read</li>
</ol>

<h2>My subheading</h2>

<p>
  This is the first subsection of my document. I'd love people to be able to
  find this content!
</p>

<h2>My 2nd subheading</h2>

<p>
  This is the second subsection of my content, which I think is more interesting
  than the last one.
</p>

 

 

7. 이벤트는 자식 컴포넌트에서 부모 컴포넌트로 전파(bubble)됩니다.

• 전파 시 이벤트가 일어난 자식 컴포넌트 -> 부모 컴포넌트 순으로 bubbling이 일어납니다.
• 이벤트 오브젝트를 통해 불필요한 전파를 막을 수 있습니다.
• 이벤트 오브젝트란 이벤트 핸들러가 받을 수 있는 유일한 매개변수로, 이벤트의 정보를 읽을 수 있으며, e로 호출하는 것이 일반적입니다.
• 자식 컴포넌트의 이벤트 핸들러 함수 내부에서 e.stopPropagation() 함수를 호출한다면 bubbling을 막을 수 있습니다.

 

 

8. 브라우저 이벤트의 기본 동작을 방지할 수 있습니다.

• form의 기본 브라우저 동작은 내부의 버튼 클릭 시 페이지 전체를 리로드하는 것입니다.
• e.preventDefault() 함수를 이벤트 핸들러 함수 내부에서 호출한다면 이를 막을 수 있습니다.

 

 

9. 이벤트 핸들러는 사이드 이펙트를 사용하기에 적합한 위치입니다.

• 함수와 달리 이벤트 핸들러는 순수할 필요가 없어, 무언가를 변경하기에 알맞습니다.
• 정보를 수정하기 전, 먼저 그 정보를 저장하기 위해 state를 이용할 수 있습니다.

 

---

참고문서

• https://ko.react.dev/learn/responding-to-events

이벤트에 응답하기 – React

• https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Accessibility/HTML