React에서 모달(Modal) 컴포넌트를 구현할 때, React.forwardRef()를 사용하면 좀 더 효율적인 방법으로 구현할 수 있습니다. React.forwardRef()는 ref 전달을 쉽게 해주는 기능이며, 컴포넌트 안에서 ref를 사용할 수 있게 해줍니다.

모달 컴포넌트의 기본 구조 생성하기

먼저 다음과 같은 기본적인 모달 컴포넌트의 구조를 생성해봅시다.

import React from 'react';

const Modal = () => {
  return (
    <div className="modal">
      <div className="modal-content">
        {/* 모달 내용 */}
      </div>
    </div>
  );
};

export default Modal;

위 코드에서는 간단한 모달 컴포넌트의 구조를 만들었습니다. <div> 태그를 사용하여 모달 컨테이너와 모달 내용을 감싸주었고, 내용 부분에는 모달에 표시할 컨텐츠를 추가하면 됩니다.

React.forwardRef()를 사용하여 ref 전달하기

다음으로, React.forwardRef()를 사용하여 ref를 전달하는 방법을 알아보겠습니다.

import React, { forwardRef } from 'react';

const Modal = forwardRef((props, ref) => {
  return (
    <div className="modal" ref={ref}>
      <div className="modal-content">
        {/* 모달 내용 */}
      </div>
    </div>
  );
});

export default Modal;

위 코드에서는 forwardRef 함수를 사용하여 Modal 컴포넌트를 감싸주었습니다. Modal 컴포넌트의 함수형 컴포넌트에서 첫 번째 매개변수로 props를 받고, 두 번째 매개변수로 ref를 받았습니다. 이제 모달 컴포넌트에서 ref를 사용할 수 있습니다.

모달 컴포넌트 사용하기

별도의 부모 컴포넌트에서 모달 컴포넌트를 사용할 때, ref를 전달할 수 있습니다.

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

const App = () => {
  const modalRef = useRef();

  const openModal = () => {
    modalRef.current.style.display = "block";
  };

  const closeModal = () => {
    modalRef.current.style.display = "none";
  };

  return (
    <div>
      <button onClick={openModal}>
        모달 열기
      </button>
      <Modal ref={modalRef} />
    </div>
  );
};

export default App;

위 코드에서는 useRef()를 사용하여 modalRef를 생성하고, openModal 함수에서 모달을 열고 closeModal 함수에서 모달을 닫습니다. 그리고 부모 컴포넌트에서 Modal 컴포넌트를 사용할 때 ref={modalRef}로 ref를 전달합니다.

이제 모달 컴포넌트가 제대로 작동하며, 부모 컴포넌트에서 모달을 열고 닫을 수 있습니다.

마무리

React.forwardRef()를 활용하면 모달 컴포넌트를 더욱 효율적으로 구현할 수 있습니다. ref를 사용하여 모달 컴포넌트의 특정 동작을 제어하는 것은 매우 간단해집니다. 이를 활용하여 다양한 상황에서 모달 컴포넌트를 유연하게 사용할 수 있습니다.

해시태그: #React #모달