React에서는 React.forwardRef() 함수를 사용하여 ref 전달을 지원합니다. 이를 활용하면 자식 컴포넌트로 ref를 전달할 수 있어, 다양한 기능을 구현할 수 있습니다. 이번에는 React.forwardRef()를 사용하여 컴포넌트의 목록(List) 기능을 구현하는 방법에 대해 알아보겠습니다.

1. React.forwardRef()란?

React.forwardRef()는 부모 컴포넌트로부터 전달된 ref를 자식 컴포넌트로 전달할 수 있도록 해주는 함수입니다. 이를 사용하여 부모 컴포넌트에서 ref를 생성하고, 자식 컴포넌트에서 해당 ref를 활용할 수 있습니다.

2. 컴포넌트 목록(List) 구현하기

아래 예시 코드를 통해 컴포넌트 목록(List)을 구현하는 방법을 알아보겠습니다.

import React, { forwardRef } from 'react';

const ListItem = forwardRef((props, ref) => {
  return <li ref={ref}>{props.text}</li>;
});

const List = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <ListItem key={index} text={item} />
      ))}
    </ul>
  );
};

위 코드에서는 ListItem 컴포넌트를 React.forwardRef()를 사용하여 생성했습니다. ListItem 컴포넌트는 ref를 전달받아 li 요소에 해당 ref를 설정합니다.

List 컴포넌트에서는 items 배열을 받아와 map 함수를 사용하여 ListItem 컴포넌트를 렌더링합니다. 이때, ListItem 컴포넌트에는 각각의 item을 text prop으로 전달합니다.

3. 사용 예제

아래는 위에서 작성한 List 컴포넌트를 사용하는 예제입니다.

import React, { useRef } from 'react';

const MyComponent = () => {
  const listRef = useRef(null);
  const items = ['Item 1', 'Item 2', 'Item 3'];

  // 리스트 내용 변경 시 스크롤 맨 위로 이동
  const handleListChange = () => {
    listRef.current.scrollTop = 0;
  };

  return (
    <div>
      <h1>List Example</h1>
      <button onClick={handleListChange}>Change List</button>
      <List ref={listRef} items={items} />
    </div>
  );
};

위 예제에서는 List 컴포넌트를 사용하고, ref를 생성하여 listRef에 할당합니다. List 컴포넌트의 items prop을 통해 목록을 전달합니다.

handleListChange 함수는 리스트 내용이 변경될 때, 스크롤을 맨 위로 이동시키기 위해 작성되었습니다. ref를 활용하여 스크롤 위치를 조작할 수 있습니다.

4. 결론

React.forwardRef()를 사용하여 컴포넌트 목록(List)을 구현하는 방법을 알아보았습니다. 이를 통해 자식 컴포넌트에서 ref를 활용하여 다양한 기능을 추가할 수 있습니다. React의 다양한 기능을 응용하여 더욱 강력한 컴포넌트를 구현해보세요!