React에서 익명 함수의 활용

React 애플리케이션을 개발하면서 자주 사용되는 패턴 중 하나는 익명 함수(anonymous functions)를 활용하는 것입니다. 이 글에서는 React에서 익명 함수를 어떻게 사용하는지 알아보겠습니다.

 

익명함수란 이름 없이 정의된 함수를 가리킵니다. 이러한 함수는 주로 콜백 함수나 이벤트 핸들러로 사용됩니다. 익명 함수는 함수 이름 없이 선언되어 변수에 할당되거나 직접 함수의 인자로 전달됩니다.

 

1. 이벤트 핸들러로 익명 함수 사용하기

React 컴포넌트에서 이벤트 핸들러를 정의할 때 익명 함수를 사용할 수 있습니다. 아래의 예제는 버튼 클릭 이벤트에 대한 익명 함수를 이용한 핸들러 예시입니다.

import React from 'react';

function MyComponent() {
  return (
    <button onClick={() => { console.log('버튼이 클릭되었습니다!'); }}>
      클릭하세요
    </button>
  );
}

export default MyComponent;

 

이렇게 하면 버튼이 클릭될 때마다 콘솔에 메시지가 출력됩니다.

 

2. `map()` 메서드와 함께 익명 함수 사용하기

React에서 배열을 렌더링할 때 `map()` 메서드와 익명 함수를 함께 사용할 수 있습니다. 아래의 예제는 배열의 각 요소를 리스트 아이템으로 렌더링하는데 익명 함수를 사용한 예시입니다.

import React from 'react';

function MyComponent() {
  const items = ['사과', '바나나', '딸기'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default MyComponent;

 

이렇게 함으로써 `items` 배열의 각 요소가 순회되면서 목록 아이템이 생성됩니다.

익명 함수를 사용하는 것은 간단한 작업이나 작은 규모의 프로젝트에서는 편리합니다. 그러나 프로젝트 규모가 커질수록 성능상의 이슈가 발생할 수 있습니다. 이런 경우에는 익명 함수 대신에 컴포넌트의 메서드를 바인딩하거나, `useCallback` 훅을 사용하여 최적화된 함수를 활용하는 것이 권장됩니다.