당신이 알아야 할 8가지 React Hooks

Jan 20, 2024

매튜 타이슨

소프트웨어 설계자, InfoWorld |

React는 JavaScript UI 프레임워크 중 선두주자로 남아 있습니다. React에는 많은 개발이 진행 중이지만 지난 몇 년 동안 가장 중요한 변화는 기능적 구성 요소로의 이동이었습니다. 기능적 구성 요소는 많은 기능을 위해 후크에 의존합니다. 가장 일반적인 후크는 useState이지만 다른 후크도 많이 있습니다.

다음은 여러분이 알지 못할 수도 있는 8가지 유용한 React 후크와 사용 방법을 살펴보겠습니다.

useState는 클래스 기반 구성 요소의 필수 기능(상태를 유지하는 멤버 변수)을 동등한 기능으로 대체하기 때문에 누구나 알고 있습니다. useReducer 후크는 비슷한 작업을 수행하지만 상태 전환이 더 많이 포함되고 애플리케이션이 전환을 명시적으로 만들어 이점을 얻는 더 복잡한 시나리오에 사용됩니다. useReducer 후크는 Redux의 리듀서에서 영감을 받았습니다. 이는 useState의 단순성과 Redux와 같은 상태 관리 시스템의 복잡성 사이의 중간 지점으로 볼 수 있습니다.

다음은 useReducer 후크를 사용하여 작업하는 방법에 대한 예입니다. 이 JSFiddle에서 리듀서를 라이브로 볼 수도 있습니다.

이 예제의 목적은 입력 상자에서 텍스트를 가져와 사용자가 버튼을 클릭하여 텍스트를 모두 대문자 또는 모두 소문자로 표시하도록 하는 것입니다. 코드는 const [state, dispatch] = useReducer(reducer,initialState);로 새로운 리듀서를 선언합니다. useReducer는 감속기 함수와 초기 상태를 가져와 배열을 반환합니다. 그런 다음 배열을 상태 및 전달 변수로 분해합니다.

감속기 자체는 const 감속기 = (상태, 동작) =>로 정의되며 두 개의 인수 함수를 제공합니다. 코드에서 디스패치 함수가 호출될 때마다 액션 객체와 함께 현재 상태를 전달합니다. 이 경우 작업 개체에는 유형 필드가 있으며 이를 사용하여 상태를 변경하는 방법을 결정합니다.

적당히 복잡한 애플리케이션에서 useReducer는 복잡성을 관리하는 데 도움이 될 수 있으며 컨텍스트를 사용하여 애플리케이션 전체에서 공유될 수도 있습니다. 애플리케이션의 복잡성으로 인해 useState를 관리하기 어려운 경우 useReducer 후크가 도움이 될 수 있습니다.

useCallback 후크는 성능 후크입니다. 이는 함수를 사용하며 단일 버전만 반환되어 모든 호출자에게 재사용되도록 보장합니다. 함수가 비용이 많이 들고 루프나 하위 구성 요소에 의해 반복적으로 호출되는 경우 useCallback 후크를 사용하면 성능이 크게 향상될 수 있습니다. 이러한 종류의 최적화를 함수 메모화라고 합니다.

목록 2에는 목록의 여러 항목에 걸쳐 동일한 함수를 사용하기 위해 useCallback을 사용하는 예가 있습니다. 다음은 라이브 JSFiddle의 예입니다.

incrementCounter에서 새로운 메모 기능을 생성하기 위해 React.useCallback()을 사용합니다. 메모된 함수를 목록의 onClick 핸들러에서 일반 함수로 사용할 수 있습니다. useCallback()은 함수를 첫 번째 인수로 사용합니다. 해당 기능 내에서 필요한 모든 작업을 수행할 수 있습니다. 주요 차이점은 종속성 변수 목록에서 무언가 변경되지 않는 한 React는 단순히 함수의 캐시된 값을 반환한다는 것입니다. 이 예에서는 카운터 변수입니다.

이는 여러 호출자, 특히 하위 구성 요소 간에 비용이 많이 드는 기능을 공유해야 하는 경우 귀중한 마법의 힘입니다. useCallback이 함수 자체를 숨기는 다음 후크(useMemo)를 볼 때 명심하세요. 즉, useCallback은 실제 함수가 나타날 때마다 다시 생성되는 것을 방지하고 필요할 때만 다시 생성합니다.

useMemo 후크는 useCallback의 형제입니다. useCallback이 함수를 캐시하는 경우 useMemo는 함수 반환 값을 캐시합니다. 미묘한 차이이지만 중요합니다.

언제 useMemo와 useCallback을 사용해야 합니까? 대답은 다음과 같습니다: 가능하면 useMemo를 사용하고, 필요할 때는 useCallback을 사용하십시오. useCallback 후크는 피하고 있는 성능 저하가 렌더링에서 함수 자체를 생성하는 것일 때 유용하며, useMemo는 함수가 나타날 때마다 함수가 다시 생성되는 것을 막지 않습니다. 그러나 useMemo는 종속성이 변경되지 않은 경우 함수가 캐시된 값을 반환하도록 보장합니다.