M

MLOG

한국어

동적 React 애플리케이션에서 안정적인 이벤트 핸들러 참조를 생성하고, 성능을 개선하며, 불필요한 리렌더링을 방지하는 강력한 도구인 React useEvent 훅을 살펴보세요.

React useEvent: 안정적인 이벤트 핸들러 참조 달성하기

React 개발자들은 이벤트 핸들러를 다룰 때, 특히 동적 컴포넌트와 클로저와 관련된 시나리오에서 종종 어려움을 겪습니다. 비교적 최근에 React 생태계에 추가된 useEvent 훅은 이러한 문제에 대한 우아한 해결책을 제공하여, 개발자들이 불필요한 리렌더링을 유발하지 않는 안정적인 이벤트 핸들러 참조를 만들 수 있게 해줍니다.

문제 이해하기: 이벤트 핸들러의 불안정성

React에서 컴포넌트는 props나 state가 변경될 때 리렌더링됩니다. 이벤트 핸들러 함수가 prop으로 전달될 때, 부모 컴포넌트가 렌더링될 때마다 새로운 함수 인스턴스가 종종 생성됩니다. 이 새로운 함수 인스턴스는 동일한 로직을 가지고 있더라도 React에 의해 다른 것으로 간주되어, 이를 수신하는 자식 컴포넌트의 리렌더링을 유발합니다.

다음의 간단한 예시를 살펴보겠습니다:


import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  };

  return (
    

      
      
Count: {count}

    

  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

이 예시에서 handleClick은 ParentComponent가 렌더링될 때마다 재생성됩니다. ChildComponent가 최적화되어 있더라도(예: React.memo 사용), onClick prop이 변경되었기 때문에 여전히 리렌더링됩니다. 이는 특히 복잡한 애플리케이션에서 성능 문제를 야기할 수 있습니다.

useEvent 소개: 해결책

useEvent 훅은 이벤트 핸들러 함수에 대한 안정적인 참조를 제공하여 이 문제를 해결합니다. 이는 이벤트 핸들러를 부모 컴포넌트의 리렌더링 주기에서 효과적으로 분리합니다.

useEvent는 (React 18 기준) 내장 React 훅은 아니지만, 커스텀 훅으로 쉽게 구현할 수 있거나 일부 프레임워크 및 라이브러리에서는 유틸리티 세트의 일부로 제공됩니다. 다음은 일반적인 구현 예시입니다:


import { useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // 동기적 업데이트를 위해 useLayoutEffect가 여기서 중요합니다
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // 의도적으로 의존성 배열을 비워 안정성을 보장합니다
  ) as T;
}

export default useEvent;

설명:

실전에서 useEvent 사용하기

이제 이전 예제를 useEvent를 사용하여 리팩토링해 보겠습니다:


import React, { useState, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // 동기적 업데이트를 위해 useLayoutEffect가 여기서 중요합니다
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // 의도적으로 의존성 배열을 비워 안정성을 보장합니다
  ) as T;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  });

  return (
    

      
      
Count: {count}

    

  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

handleClick을 useEvent로 감싸면, count 상태가 변경될 때에도 ParentComponent의 렌더링 전반에 걸쳐 ChildComponent가 동일한 함수 참조를 받도록 보장할 수 있습니다. 이것은 ChildComponent의 불필요한 리렌더링을 방지합니다.

useEvent 사용의 이점

useEvent의 사용 사례

대안 및 고려사항

useEvent는 강력한 도구이지만, 염두에 두어야 할 대안적인 접근 방식과 고려사항이 있습니다:

국제화 및 접근성 고려사항

전 세계 사용자를 대상으로 React 애플리케이션을 개발할 때는 국제화(i18n)와 접근성(a11y)을 고려하는 것이 중요합니다. useEvent 자체는 i18n이나 a11y에 직접적인 영향을 미치지 않지만, 지역화된 콘텐츠나 접근성 기능을 처리하는 컴포넌트의 성능을 간접적으로 향상시킬 수 있습니다.

예를 들어, 컴포넌트가 지역화된 텍스트를 표시하거나 현재 언어에 기반한 ARIA 속성을 사용하는 경우, 해당 컴포넌트 내의 이벤트 핸들러가 안정적인지 확인하면 언어가 변경될 때 불필요한 리렌더링을 방지할 수 있습니다.

예시: 지역화와 함께 useEvent 사용하기


import React, { useState, useContext, createContext, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // 동기적 업데이트를 위해 useLayoutEffect가 여기서 중요합니다
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // 의도적으로 의존성 배열을 비워 안정성을 보장합니다
  ) as T;
}

const LanguageContext = createContext('en');

function LocalizedButton() {
  const language = useContext(LanguageContext);
  const [text, setText] = useState(getLocalizedText(language));

  const handleClick = useEvent(() => {
    console.log('Button clicked in', language);
    // 언어에 따라 특정 작업을 수행합니다
  });

  function getLocalizedText(lang) {
      switch (lang) {
        case 'en':
          return 'Click me';
        case 'fr':
          return 'Cliquez ici';
        case 'es':
          return 'Haz clic aquí';
        default:
          return 'Click me';
      }
    }

    //언어 변경 시뮬레이션
    React.useEffect(()=>{
        setTimeout(()=>{
            setText(getLocalizedText(language === 'en' ? 'fr' : 'en'))
        }, 2000)
    }, [language])

  return ;
}

function App() {
  const [language, setLanguage] = useState('en');

  const toggleLanguage = useCallback(() => {
    setLanguage(language === 'en' ? 'fr' : 'en');
  }, [language]);

  return (
    
      

        
        
      

    
  );
}

export default App;

이 예제에서 LocalizedButton 컴포넌트는 현재 언어에 따라 텍스트를 표시합니다. handleClick 핸들러에 useEvent를 사용함으로써, 언어가 변경될 때 버튼이 불필요하게 리렌더링되지 않도록 하여 성능과 사용자 경험을 향상시킵니다.

결론

useEvent 훅은 성능을 최적화하고 컴포넌트 로직을 단순화하려는 React 개발자에게 유용한 도구입니다. 안정적인 이벤트 핸들러 참조를 제공함으로써 불필요한 리렌더링을 방지하고 코드 가독성을 높이며 React 애플리케이션의 전반적인 효율성을 향상시킵니다. 내장 React 훅은 아니지만, 간단한 구현과 상당한 이점 덕분에 모든 React 개발자의 툴킷에 추가할 가치가 있습니다.

useEvent의 원리와 사용 사례를 이해함으로써 개발자들은 전 세계 사용자를 위해 더 성능이 좋고, 유지보수하기 쉬우며, 확장 가능한 React 애플리케이션을 구축할 수 있습니다. 최적화 기술을 적용하기 전에 항상 성능을 측정하고 애플리케이션의 특정 요구사항을 고려하는 것을 잊지 마십시오.