React의 forwardRef와 useRef의 이해와 활용법

React의 forwardRef와 useRef 훅의 개념과 사용법을 실제 예제를 통해 상세히 설명합니다.

React는 컴포넌트 기반의 UI 라이브러리로, 효율적인 상태 관리와 컴포넌트 간의 데이터 흐름을 중시합니다. 하지만 때로는 특정 DOM 요소나 컴포넌트 인스턴스에 직접 접근해야 할 필요가 있습니다. 이때 유용하게 사용할 수 있는 두 가지 React 훅이 있습니다: `forwardRef`와 `useRef`. 이 글에서는 이 두 훅의 개념과 사용법을 상세히 설명하고, 실제 예제를 통해 활용 방법을 소개하겠습니다.

forwardRef

자식 컴포넌트로 ref 전달하기

`forwardRef`는 부모 컴포넌트가 자식 컴포넌트의 DOM 요소나 클래스 인스턴스에 접근할 수 있도록 하는 기능을 제공합니다. 이는 주로 외부 라이브러리와의 통합이나 DOM 조작이 필요한 경우에 유용합니다.

사용법

1. 기본 사용법
   import React, { forwardRef } from 'react';

   const MyComponent = forwardRef((props, ref) => (
     <div ref={ref}>
       {props.children}
     </div>
   ));

   export default MyComponent;

여기서 `forwardRef`는 `MyComponent`가 부모 컴포넌트로부터 전달받은 ref를 자신의 div 요소에 연결합니다.

2. 부모 컴포넌트에서 ref 사용법
   import React, { useRef } from 'react';
   import MyComponent from './MyComponent';

   const ParentComponent = () => {
     const myRef = useRef(null);

     return (
       <div>
         <MyComponent ref={myRef}>
           Hello, World!
         </MyComponent>
         <button onClick={() => console.log(myRef.current)}>Check Ref</button>
       </div>
     );
   };

   export default ParentComponent;

이 예제에서 `ParentComponent`는 `useRef`를 통해 `myRef`를 생성하고, 이를 `MyComponent`에 전달하여 div 요소에 직접 접근할 수 있습니다. 버튼을 클릭하면 ref를 통해 접근한 요소가 콘솔에 출력됩니다.

useRef

함수형 컴포넌트에서 참조 관리

`useRef`는 함수형 컴포넌트에서 참조를 생성하고 관리하는 데 사용됩니다. 주로 DOM 요소에 접근하거나 값을 저장하는 용도로 사용되며, 저장된 값은 컴포넌트가 리렌더링되어도 유지됩니다.

사용법

1. DOM 요소에 접근
   import React, { useRef, useEffect } from 'react';

   const MyComponent = () => {
     const myRef = useRef(null);

     useEffect(() => {
       myRef.current.focus();
     }, []);

     return <input ref={myRef} type="text" />;
   };

   export default MyComponent;

`MyComponent`는 `useRef`를 사용하여 input 요소에 대한 참조를 생성하고, `useEffect`를 통해 컴포넌트가 마운트될 때 해당 요소에 포커스를 설정합니다.

2. 값 저장

`useRef`는 DOM 요소뿐만 아니라 값 저장에도 유용합니다. 이 경우, 상태 변화에 따른 리렌더링을 방지할 수 있습니다.

   import React, { useRef } from 'react';

   const Counter = () => {
     const countRef = useRef(0);

     const increment = () => {
       countRef.current += 1;
       console.log(countRef.current);
     };

     return (
       <div>
         <button onClick={increment}>Increment</button>
       </div>
     );
   };

   export default Counter;

이 예제에서는 `useRef`를 사용하여 `countRef`라는 변수를 생성하고, 이는 컴포넌트가 리렌더링되어도 값을 유지합니다. 버튼을 클릭할 때마다 `countRef.current` 값이 증가하며, 콘솔에 출력됩니다.

결론

React의 `forwardRef`와 `useRef`는 컴포넌트 간의 참조 전달 및 관리에 있어 매우 유용한 도구입니다. `forwardRef`는 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하는 데 사용되며, `useRef`는 함수형 컴포넌트에서 DOM 요소나 값을 참조하고 저장하는 데 활용됩니다. 이 두 훅을 적절히 사용하면 컴포넌트 간의 상호작용을 더욱 유연하게 만들 수 있으며, 복잡한 UI 상호작용을 효율적으로 구현할 수 있습니다. React 개발자라면 이 두 훅을 꼭 숙지하고 적재적소에 활용해보시기 바랍니다.

답글 남기기