React.forwardRef()를 사용하여 컴포넌트의 구간(Line) 선택 기능 구현 방법에 대해 알려주세요.

10 Nov 2023

reactjs

React는 컴포넌트 기반의 웹 애플리케이션 개발을 위한 인기있는 JavaScript 라이브러리입니다. 컴포넌트는 독립적으로 구성 가능하며, 다른 컴포넌트와 조합하여 재사용할 수 있습니다. 이번 포스팅에서는 React의 forwardRef()를 사용하여 컴포넌트 내에서 특정 구간(Line)을 선택할 수 있는 기능을 구현하는 방법을 알아보겠습니다.

forwardRef()란?

forwardRef()는 React에서 제공하는 기능으로, 부모 컴포넌트에서 자식 컴포넌트로 직접적으로 ref를 전달할 수 있도록 해줍니다. ref는 해당 컴포넌트의 인스턴스나 DOM 요소를 참조하는 데 사용됩니다. forwardRef()를 사용하면 ref를 사용하여 자식 컴포넌트 내부에서 DOM 요소에 직접 접근할 수 있습니다.

컴포넌트의 구간 선택 기능 구현하기

Line 컴포넌트 생성

우선, Line 컴포넌트를 생성합니다. 이 컴포넌트는 선택 가능한 한 줄의 구간을 나타낼 것입니다. 내용에 따라 스타일이나 이벤트 핸들러를 추가적으로 구현할 수 있습니다.
```
import React from 'react';

const Line = React.forwardRef(({ text, onClick }, ref) => {
  return (
    <div ref={ref} onClick={onClick}>
      {text}
    </div>
  );
});

export default Line;
```
위의 예시 코드에서 ref와 onClick은 부모 컴포넌트에서 전달된 값입니다. ref는 마우스 클릭 등의 이벤트 후 해당 DOM 요소에 직접 접근할 수 있도록 하며, onClick은 클릭 이벤트에 대한 핸들러 함수입니다.

LineSelector 컴포넌트 생성

다음으로, LineSelector 컴포넌트를 생성합니다. 이 컴포넌트는 여러 Line 컴포넌트들을 포함하며, 선택 가능한 구간을 표시합니다.

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

const LineSelector = () => {
  const lineRefs = useRef([]);

  const handleClick = (index) => {
    // 선택한 Line 컴포넌트에 대한 처리 로직 작성
  };

  return (
    <div>
      {[1, 2, 3, 4].map((number, index) => (
        <Line
          key={index}
          text={`Line ${number}`}
          onClick={() => handleClick(index)}
          ref={(ref) => (lineRefs.current[index] = ref)}
        />
      ))}
    </div>
  );
};

export default LineSelector;

위의 예시 코드에서 lineRefs는 Line 컴포넌트들이 참조되는 배열입니다. handleClick 함수는 Line 컴포넌트의 클릭 이벤트에 대한 처리 로직을 작성할 수 있습니다. Line 컴포넌트의 인덱스를 파라미터로 전달받아 해당 Line 컴포넌트를 선택할 수 있습니다.

LineSelector 컴포넌트 사용하기

마지막으로, LineSelector 컴포넌트를 원하는 곳에서 사용할 수 있습니다. 이 컴포넌트는 여러 Line 컴포넌트를 렌더링하고 구간 선택 기능을 제공합니다.
```
import React from 'react';
import LineSelector from './LineSelector';

const App = () => {
  return (
    <div>
      <h1>구간 선택 기능 예제</h1>
      <LineSelector />
    </div>
  );
};

export default App;
```
위의 예시 코드에서는 간단한 구간 선택 기능 예제를 구현한 것입니다. LineSelector 컴포넌트를 사용하여 여러 Line 컴포넌트를 렌더링하고, 클릭 이벤트를 처리하는 코드를 작성할 수 있습니다.

마무리

React의 forwardRef()를 사용하여 컴포넌트 내에서 특정 구간(Line)을 선택하고 처리하는 기능을 구현하는 방법에 대해 알아보았습니다. forwardRef()를 활용하면 ref를 자식 컴포넌트로 전달하여 DOM 요소에 접근할 수 있습니다. 위의 예시 코드를 기반으로 한다면, 선택한 Line 컴포넌트에 대한 로직을 구현할 수 있을 것입니다. React의 다양한 기능과 함께 forwardRef()를 활용하여 더욱 유연한 컴포넌트 기반 애플리케이션을 개발해보시기 바랍니다.

#React #forwardRef