React & Next.js

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

0

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 개발자라면 이 두 훅을 꼭 숙지하고 적재적소에 활용해보시기 바랍니다.

Leave a Reply