📘 [Recat] React Refs(참조) & Portals(포탈) 활용

2025년 04월 08일 in Dev / Frontend on #React #Web

[Recat] React Refs(참조) & Portals(포탈) 활용

Refs(참조)로 HTML 요소 연결 및 접근

useRef(참조)란 무엇인가?

ref는 HTML 요소나 리액트 컴포넌트에 직접 접근할 수 있게 해주는 리액트의 특별한 값 객체입니다.
state와는 다르게 ref는 값이 변경되어도 컴포넌트를 리렌더링하지 않습니다.
useRef()를 통해 참조 객체를 생성할 수 있으며, 이 객체는 .current 속성을 가짐.

//refs 생성
const playerName = useRef();

// jsx요소에 연결
<input ref={playerName} />

// 참조값 사용 current.value를 통해 연결된 input 요소의 현재 값에 접근 가능
const handleClick = () => {
  const enteredValue = playerName.current.value;
  setEnteredPlayerName(enteredValue);
};

`useRef`와 `useState`의 차이점

항목	`state`	`ref`
용도	컴포넌트 UI에 직접 영향을 주는 값	DOM 접근 또는 UI와 무관한 내부 값 저장
값 변경 시	컴포넌트 재렌더링 발생	컴포넌트 재렌더링 발생하지 않음
접근 시점	항상 최신값 보장	초기 렌더링 직후에는 연결되지 않아 `undefined`일 수 있음
사용 위치	JSX 내 상태 관리에 주로 사용	DOM 요소 참조, 임시 값 저장 등에 사용

ref를 잘못 사용할 경우 생기는 문제

const playerName = useRef();
console.log(playerName.current.value); // ❌ 에러 발생 가능

컴포넌트 최초 렌더링 시점에는 ref 연결이 되지 않아 playerName.current는 undefined
따라서 playerName.current.value 접근 시 에러 발생

문제 개요

각각의 타이머를 시작했다가 중지했음에도 불구하고 setTimeout()의 실행 결과로 "졌습니다" 같은 메시지가 여전히 출력되는 문제가 발생함. 이는 타이머를 저장한 변수(timer) 가 각 컴포넌트 인스턴스마다 고유하지 않기 때문.

let timer; // 컴포넌트 함수 외부에 위치

문제: 이 변수는 모든 컴포넌트 인스턴스 간에 공유됨
A 인스턴스에서 타이머를 설정하고 B 인스턴스에서 다시 설정하면, 기존 A의 타이머 ID가 덮어쓰기됨
중지 요청 시, 오류가 있는 타이머 ID를 중지하게 되어 "졌습니다" 메시지가 나타남

const timer = useRef();

각 컴포넌트 인스턴스마다 독립적인 ref를 가짐
useRef는 HTML 요소 접근뿐 아니라 상태로 관리하기 부적절한 값 저장에도 유용
컴포넌트가 재실행되어도 ref 값은 유지되며, 컴포넌트 인스턴스마다 고유
상태처럼 UI 갱신을 유도하지 않고, 변수처럼 단기 저장소 역할을 함
타이머 ID, 이전 값, 외부 라이브러리 인스턴스 등을 보존할 때 최적의 선택

커스텀 컴포넌트로 Refs(참조) 전달

부모 컴포넌트(TimerChallenge)에서 자식 컴포넌트(ResultModal)의 <dialog> DOM 요소에 접근하여 showModal() 메서드를 호출하고 싶은 상황

부모 컴포넌트 (TimerChallenge)에서 ref 생성

const dialog = useRef(); // dialog DOM 참조용 ref 생성

자식 컴포넌트 (ResultModal)에 ref 전달

<ResultModal ref={dialog} />

자식 컴포넌트 (ResultModal)에서 ref 추출

function ResultModal({ ... }, ref) {
  return <dialog ref={ref}>...</dialog>;
}

✅ 주의: 이 방식은 최신 React에서만 작동합니다 (React 18 이상, 특히 React 19부터 더 공식화됨)

React 구버전 (17 이하)

React는 일반적인 props로는 ref를 직접 전달받지 못합니다. 이때는 다음처럼 해결합니다.

forwardRef() 사용법 (React 버전에 상관없이 작동)

forwardRef()로 자식 컴포넌트 감싸기 forwardRef는 ref를 두 번째 인자로 컴포넌트에 전달함

import React, { forwardRef } from "react";

const ResultModal = forwardRef(function ResultModal(props) {
  return <dialog ref={ref}>...</dialog>;
},ref);

export default ResultModal;

포털(Portal)이란?

포털은 JSX로 작성된 UI 요소를 현재 컴포넌트 트리 외부의 DOM 노드에 렌더링할 수 있도록 하는 React의 기능입니다.

왜 포털을 사용하나요?

기존 구조에서는 모달(dialog) 같은 UI 요소가 컴포넌트 내부에서 렌더링되어, DOM 트리에서 다른 요소들과 중첩되게 됩니다. 이런 방식의 문제점

시각적으로는 괜찮아 보여도,
실제로는 HTML 구조가 엉켜서 접근성 문제 발생 가능
CSS 충돌이나 z-index 문제, 레이아웃 깨짐 발생 가능성
깊이 중첩된 요소 안의 모달은 의도대로 동작하지 않을 수 있음 → 이를 해결하기 위해 모달 같은 UI 요소를 body 바로 밑 등 최상단에 렌더링할 수 있도록 포털을 사용함

포털 구현 방법

index.html에 모달용 DOM 노드 추가

<!-- public/index.html -->
<body>
  <div id="root"></div>
  <div id="modal"></div> <!-- 포털 렌더링 위치 -->
</body>

React에서 포털 기능 import

import { createPortal } from 'react-dom';

JSX를 포털로 이동

return createPortal(
  <dialog>모달 내용</dialog>,
  document.getElementById('modal')  // 모달 div로 이동
);

createPortal(JSX, DOM 요소)
첫 번째 인수: 렌더링할 UI
두 번째 인수: 렌더링 위치
즉 화면에서는 그대로, 코드상 구조는 개선됨

📘 [Recat] React Refs(참조) & Portals(포탈) 활용

Refs(참조)로 HTML 요소 연결 및 접근

useRef(참조)란 무엇인가?

`useRef`와 `useState`의 차이점

ref를 잘못 사용할 경우 생기는 문제

문제 개요

커스텀 컴포넌트로 Refs(참조) 전달

React 구버전 (17 이하)

forwardRef() 사용법 (React 버전에 상관없이 작동)

포털(Portal)이란?

왜 포털을 사용하나요?

포털 구현 방법

📑 Reference

Dev Study Note

Error

Refs(참조)로 HTML 요소 연결 및 접근

useRef(참조)란 무엇인가?

useRef와 useState의 차이점

ref를 잘못 사용할 경우 생기는 문제

문제 개요

커스텀 컴포넌트로 Refs(참조) 전달

React 구버전 (17 이하)

forwardRef() 사용법 (React 버전에 상관없이 작동)

포털(Portal)이란?

왜 포털을 사용하나요?

포털 구현 방법

📑 Reference

Pagination

Templates (for web app):

Error

`useRef`와 `useState`의 차이점