forwardRef와 useRef를 활용하여 modal 제어하기

참조(ref)란?

참조(ref)는 React에서 DOM 요소나 클래스형 컴포넌트에 접근하기 위해 사용됩니다.
예를 들어, input 요소에 포커스를 맞추거나, dialog 같은 내장 DOM 요소의 메소드를 호출할 때 사용합니다.

컴포넌트 구조

• TimerChallenge: 타이머를 시작하고, 만료되었을 때 모달 창을 띄우는 역할을 합니다.
• ResultModal: 타이머가 끝났을 때 사용자에게 결과를 보여주는 모달 창입니다.

1. useRef로 참조 만들기

TimerChallenge 컴포넌트에서는 useRef를 사용해 두 개의 참조를 생성합니다:

• timer는 setTimeout으로 설정한 타이머를 참조합니다.
• dialog는 ResultModal의 dialog 요소를 참조합니다.

const timer = useRef();
const dialog = useRef();

• useRef는 current라는 속성을 가지는 객체를 반환하며, 이 current를 통해 우리가 참조한 DOM 요소에 접근할 수 있습니다.

2. 타이머 시작 및 만료 처리

• 사용자가 타이머를 시작하면 handleStart 함수가 호출됩니다.
• setTimeout을 사용해 설정된 시간(targetTime) 후에 특정 작업을 실행하도록 합니다.
• 타이머가 만료되면 setTimerExpired(true)를 호출해 상태를 갱신하고, dialog.current.showModal()을 호출해 모달 창을 보여줍니다.

function handleStart(){
    timer.current = setTimeout(() => {
      setTimerExpired(true);
      dialog.current.showModal();
      //dialog 요소(HTML의 `<dialog>` 태그)를 브라우저에 표시하는 메서드
    }, targetTime * 1000);
    setTimerStarted(true);
}

3. ResultModal에 참조 전달

• TimerChallenge 컴포넌트에서 ResultModal 컴포넌트를 렌더링할 때, ref 속성으로 dialog 참조를 전달합니다.

<ResultModal ref={dialog} targetTime={targetTime} result="lost"/>

ref={dialog}는 ResultModal 컴포넌트가 dialog라는 참조를 받을 수 있게 해준다

4. forwardRef를 사용한 참조 전달

• 일반적으로 React에서 만든 컴포넌트는 ref를 직접 받을 수 없습니다.
  그래서 forwardRef라는 함수를 사용해 참조를 전달할 수 있게 만들어야 합니다.
• forwardRef는 참조를 컴포넌트에 전달하는 역할을 합니다.
• ResultModal 컴포넌트를 forwardRef로 감싸서 참조를 전달받고, 그 참조를 dialog DOM 요소에 연결합니다.

const ResultModal = forwardRef(function ResultModal({ result, targetTime }, ref) {
    return (
        <dialog ref={ref} className="result-modal">
            <h2>You {result}</h2>
            <p>The target time was <strong>{targetTime}</strong></p>
            <form method="dialog">
                <button>Close</button>
            </form>
        </dialog>
    );
});

forwardRef는 ResultModal 컴포넌트를 감싸고 있으며, 이를 통해 부모 컴포넌트(TimerChallenge)에서 전달된 ref를 받아서 <dialog> 요소에 연결합니다.

전체 흐름

• 1단계: TimerChallenge 컴포넌트에서 타이머를 시작합니다.
• 2단계: 타이머가 설정된 시간 후에 만료되면 setTimeout이 만료됩니다.
• 3단계: 타이머가 만료되면 dialog.current.showModal()을 호출하여 ResultModal의 모달 창을 브라우저에 표시합니다.
• 4단계: ResultModal 컴포넌트는 forwardRef를 통해 전달받은 ref를 사용하여 실제 DOM 요소(dialog)를 조작합니다.

중요 개념

참조(ref): 특정 DOM 요소에 직접 접근하고 조작할 수 있도록 해주는 도구입니다.
useRef 훅: 참조를 생성할 때 사용하며, DOM 요소에 접근하기 위해 사용됩니다.
forwardRef: 참조를 컴포넌트 간에 전달할 수 있도록 해주는 함수입니다.
dialog.current.showModal(): <dialog> DOM 요소를 화면에 표시하기 위해 사용되는 메서드입니다.