ReactJS - Forwarding Refs: A Beginner's Guide

안녕하세요, 미래의 React 마법사 여러분! 오늘 우리는 흥미로운 여정을 떠나 React의 개념인 "Forwarding Refs"를 탐구해보겠습니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 당신의 친절한 안내자가 되겠습니다. 단계별로 함께 진행하겠습니다. 이 튜토리얼의 끝을 맺을 때쯤에는 프로처럼 refs를 전달할 수 있을 것입니다!

ReactJS - Forwarding Refs

Refs는 무엇이고, 왜 그것을 전달해야 하나요?

Refs를 전달하는 것에 들어가기 전에, 먼저 refs 자체에 대해 이야기해보겠습니다. 집을 짓는 것을 상상해보세요 (이는 우리가 웹 애플리케이션을 만들 때 하는 일과 비슷합니다). 가끔 특정 부분에 직접 접근하거나 조작해야 할 때가 있습니다. React에서 refs는 우리가 컴포넌트에 이러한 작업을 할 수 있게 해주는 특별한 도구입니다.

이제 refs를 전달하는 것은 이러한 특별한 도구를 우리 집의 다른 방으로 전달하는 것과 같습니다. 이는 우리가 재사용 가능한 컴포넌트 라이브러리를 작업할 때 특히 유용한 기술입니다.

forwardRef 메서드: 우리의 마법 지팡이

React는 우리에게 이러한 ref 전달을 가능하게 해주는 forwardRef 메서드를 제공합니다. 이를 마법 지팡이로 생각해보세요. 우리의 컴포넌트가 ref를 받아 더 내려보내는 데 사용할 수 있습니다.

forwardRef 메서드의 서명

이 마법 지팡이를 어떻게 사용하는지 살펴보겠습니다:

const ForwardedComponent = React.forwardRef((props, ref) => {
// 컴포넌트 로직 여기
});

처음에는 조금 두려울 수 있지만, 하나씩 풀어보겠습니다:

우리는 새로운 컴포넌트를 만들고 ForwardedComponent에 할당합니다.
우리는 React.forwardRef()를 사용하여 컴포넌트 함수를 감싸줍니다.
우리의 컴포넌트 함수는 이제 두 가지 매개변수를 받습니다: props (우리가 익숙한 것)과 ref (우리의 새로운 친구).

forwardRef를 컴포넌트에 적용하기

이제 이를 실제 세계의 상황에서 어떻게 사용할 수 있는지 보겠습니다. 우리가 애플리케이션 전체에서 사용하고 싶은 커스텀 입력 컴포넌트를 만들고 있다고 상상해보세요.

import React from 'react';

const FancyInput = React.forwardRef((props, ref) => {
return <input ref={ref} {...props} style={{border: '2px solid purple'}} />;
});

export default FancyInput;

이를 하나씩 풀어보겠습니다:

우리는 React를 임포트합니다 ( 항상 중요! ).
우리는 React.forwardRef를 사용하여 FancyInput 컴포넌트를 만듭니다.
우리의 컴포넌트 내부에서는 <input> 요소를 반환합니다.
우리는 <input> 요소에 ref를 전달하여 ref 속성을 사용합니다.
우리는 props를 스프레드하여 FancyInput에 전달된 모든 prop을 <input>이 받을 수 있게 합니다.
우리는 우리의 입력을 화려하게 만들기 위해 약간의 스타일을 추가합니다 (보라색 테두리, 누구나 좋아할까요?).

이제 우리가 FancyInput 컴포넌트를 애플리케이션의 다른 곳에서 사용할 때, 우리는 그것에 ref를 연결할 수 있고, 그 ref는 실제로 <input> 요소에 연결됩니다.

다음은 우리가 새로운 컴포넌트를 사용하는 방법입니다:

import React, { useRef, useEffect } from 'react';
import FancyInput from './FancyInput';

function App() {
const inputRef = useRef(null);

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

return (
<div>
<FancyInput ref={inputRef} placeholder="Type something fancy..." />
</div>
);
}

이 예제에서:

우리는 useRef를 사용하여 ref를 생성합니다.
우리는 이 ref를 FancyInput 컴포넌트에 전달합니다.
useEffect 훅에서 우리는 ref를 사용하여 컴포넌트가 마운트될 때 입력을 포커싱합니다.

그렇게 하면! 우리는 성공적으로 ref를 커스텀 컴포넌트를 통해 전달했습니다.

이것이 왜 유용한가요?

perhaps you're wondering, "Why go through all this trouble?" Well, imagine you're building a library of reusable components. By using forwardRef, you're giving the users of your components the ability to interact with the underlying DOM elements when necessary, without exposing the entire internal structure of your component.

It's like giving someone a TV remote that only has the essential buttons, rather than overwhelming them with all the internal circuitry of the TV.

A Table of forwardRef Methods

Here's a handy table summarizing the key methods we've discussed:

Method	Description	Example
`React.forwardRef()`	Creates a React component that can forward the ref attribute to a child component	`const FancyButton = React.forwardRef((props, ref) => ...)`
`useRef()`	Creates a mutable ref object	`const ref = useRef(null)`
`ref` attribute	Attaches the ref to a React element	`<input ref={ref} />`

Conclusion

And there you have it, folks! We've journeyed through the land of forwarding refs in React. Remember, like any powerful tool, use refs and ref forwarding judiciously. They're great for managing focus, triggering animations, or integrating with third-party DOM libraries.

As you continue your React adventure, you'll find more scenarios where forwarding refs can be incredibly useful. Keep practicing, keep coding, and before you know it, you'll be building amazing React applications!

Happy coding, and may your refs always forward true!

Credits: Image by storyset