안녕하세요! 오늘은 React의 forwardRef() 메서드를 활용하여 컴포넌트의 알림바(Toast)를 구현하는 방법에 대해 알려드리겠습니다.

React.forwardRef()란?

forwardRef()는 React의 고급 리액트 API 중 하나로, 리액트 컴포넌트에서 ref를 전달하기 위해 사용됩니다. 이를 사용하면 ref를 가진 자식 컴포넌트를 감싸고 있는 부모 컴포넌트에서 ref를 직접 참조할 수 있게 됩니다.

알림바(Toast) 컴포넌트 구현

먼저, 알림바 컴포넌트를 만들기 위해 다음과 같이 코드를 작성해보겠습니다.

import React, { forwardRef } from 'react';

const Toast = forwardRef((props, ref) => {
  return (
    <div ref={ref} className="toast">
      {/* 알림 내용 */}
    </div>
  );
});

export default Toast;

위 코드에서 forwardRef() 메서드를 사용하여 컴포넌트를 감싸고, ref를 전달받을 수 있도록 설정합니다. 마크업 안에는 알림 내용을 표시할 div 요소가 있습니다.

알림바 사용 예시

이제 알림바 컴포넌트를 사용하는 예시를 살펴보겠습니다.

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

const App = () => {
  const toastRef = useRef(null);

  const showToast = () => {
    toastRef.current.classList.add("active");
  };

  return (
    <div className="app">
      <button onClick={showToast}>알림 보이기</button>
      <Toast ref={toastRef} />
    </div>
  );
};

export default App;

위 코드에서 useRef()를 사용하여 toastRef라는 ref 객체를 생성합니다. showToast() 함수는 알림바를 보이게 하기 위해 toastRef.current의 클래스 리스트에 “active”를 추가합니다. 마지막으로, 알림바 컴포넌트는 ref={toastRef}를 통해 toastRef와 연결됩니다.

마무리

이렇게 forwardRef()를 사용하여 컴포넌트의 알림바를 구현하는 방법에 대해 알아보았습니다. forwardRef()를 활용하면 컴포넌트 간의 ref 전달이 간편해지며, 알림바와 같이 외부에서 제어해야 하는 컴포넌트를 구현할 때 유용합니다.

더 자세한 내용은 React 공식 문서를 참고해 보시기 바랍니다.

참고자료: React 문서 - Forwarding Refs

#React #알림바