[리액트 공식문서 정독하기] 리액트 주요개념 - 2 (이벤트 처리하기, React에서 콜백 함수 사용 시 주의할 점)

이벤트 처리하기

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다.

비슷해도 크게 세가지의 차이점은 있다.

세가지 차이점

1. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase) 사용
2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러 전달

// HTML
<button onclick="activateLasers()">
  Activate Lasers
</button>

// React -> 캐멀 케이스, 함수로 이벤트 핸들러 전달
<button onClick={activateLasers}>
  Activate Lasers
</button>

3.  React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출하여 폼을 제출할 때 가지고 있는 기본 동작을 방지해야한다.  => 공식문서에서 이 부분은 틀린 것 같다. React에서는 합성 이벤트를 사용하여 브라우저의 기본 동작을 막을 수 있다. 따라서 React의 이벤트 핸들러에서는 명시적으로 preventDefault()를 호출하지 않아도, 기본 동작이 막힌다.

따라서, React에서 폼을 제출할 때 기본 동작을 방지하려면 명시적으로 preventDefault()를 호출할 필요가 없다.
React는 이를 자동으로 처리하여 폼 제출 시 기본 동작인 페이지 새로고침을 막아준다.

// HTML
<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

// React
function Form() {
  function handleSubmit(e) {
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

e는 합성 이벤트인데, React는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없다.

 

* 합성 이벤트

합성 이벤트(Synthetic Event)는 React에서 이벤트 처리를 간편하게 하기 위한 개념이다.

우선, 이벤트란 사용자가 웹 페이지에서 어떤 동작(예: 클릭, 입력 등)을 하거나 브라우저에서 발생하는 일(예: 로딩 완료 등)을 의미하는데

React에서는 이벤트를 다루기 위해 합성 이벤트를 사용한다.
합성 이벤트는 React가 브라우저의 기본 이벤트를 추상화한 것으로, 브라우저 호환성과 관련된 문제를 해결하고, 다양한 브라우저에서 일관성 있는 이벤트 동작을 보장해준다.

예를 들어, 사용자가 웹 페이지의 버튼을 클릭하면 클릭 이벤트가 발생하는데 이 때, React는 해당 클릭 이벤트를 브라우저가 제공하는 기본 이벤트와 동일하게 다루는 것이 아니라, 합성 이벤트를 사용하여 브라우저 이벤트와 비슷하지만, React에서 정의된 방식으로 다룬다.

합성 이벤트를 사용하면 브라우저 호환성과 관련된 문제를 걱정할 필요가 없어지며, 모든 브라우저에서 동일한 방식으로 이벤트를 다룰 수 있다. 이렇게 함으로써 개발자는 다양한 브라우저 환경에서도 일관성 있는 이벤트 처리를 할 수 있다.

간단히 말하면, 합성 이벤트는 React에서 이벤트를 처리하기 위해 사용되는 도구로서, 브라우저 호환성과 이벤트 처리를 편리하게 해주는 개념이다. 이를 통해 React 개발자는 더욱 편리하고 일관성 있게 웹 애플리케이션을 개발할 수 있다.

그리고 위에서 말했듯이, React 이벤트는 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않는다.

폼 제출 시 기본적으로 페이지를 새로고침하는 것이 기본 동작이지만
React 이벤트는 e.preventDefault()를 호출하지 않아도 폼 제출 시 기본 동작인 페이지 새로고침을 막는 것이 그 예이다.
이렇듯 React로 폼을 제출할 땐 굳이 뭘 하지 않아도 페이지 전체가 새로고침되지 않고 부분적인 데이터 갱신이 가능하게 된다.

이러한 기본 동작의 차이로 React를 사용하면 더욱 유연하게 개발할 수 있는 것 같다.

---

React에서 콜백 함수 사용 시 주의할 점 : 성능 면에서의 차이를 알아보자!

1. <button onClick={handleClick}>

2. <button onClick={() => handleClick()}>

두 가지 방식은 둘 다 동작은 비슷하나 성능 면에서 차이가 있다. 

나는 어쩔 때는 1번처럼, 어쩔 때는 2번처럼 썼다. 이유는 그냥이다.. 그냥 손으로 코드가 써지는 대로 썼었다.
두 방식에 이러한 성능적인 차이가 있는지 몰랐는데 충격이다.... 이젠 무조건 1번 방식을 사용하도록 해야겠다.

1. <button onClick={handleClick}>: 이 방식은 함수를 감싸지 않고 바로 콜백으로 사용한다. 이렇게 사용하면 함수를 새로 만들지 않고 기존의 함수를 그대로 재사용한다. 따라서 함수를 새로 만들 필요가 없기 때문에 성능이 좋아진다.
2. <button onClick={() => handleClick()}>: 이 방식은 콜백으로 사용할 때마다 새로운 함수를 만든다.. 화살표 함수(() => ...)를 사용해서 새로운 함수를 만들기 때문에 메모리에 새로운 함수가 계속해서 생성된다. 이렇게 하면 성능에 영향을 미칠 수 있다. 작은 규모의 애플리케이션에서는 큰 문제가 되지 않지만, 큰 규모의 애플리케이션에서는 불필요한 함수 생성이 많아져 성능에 영향을 줄 수 있다.

다시 설명하자면 2번의 문제점은 버튼이 클릭될 때마다 새로운 콜백 함수가 생성된다. 간단히 말하면, onClick={() => handleClick()} 방식은 버튼을 클릭할 때마다 함수가 계속 만들어진다. 일반적으로 이러한 콜백 함수 생성은 아주 큰 문제가 되지 않겠지만 만약 이 콜백 함수가 다른 하위 컴포넌트에 props로 전달된다면, 그 하위 컴포넌트들도 같이 다시 렌더링될 수 있다. 렌더링은 컴퓨터의 작업 중에서 비용이 큰 작업 중 하나이기에 따라서 불필요한 렌더링은 성능 저하로 이어질 수 있다.