[🕹️ 토이 프로젝트] create portal를 통한 modal 코드 개선해 보기

JE·2025년 1월 12일

개인프로젝트 리팩토링 토이프로젝트 포켓몬API

프로젝트/클론코딩

목록 보기

33/33

시작

개인 프로젝트로 진행한 포켓몬 도감 중 modal 요소에 문제점을 발견하게 되었다.

문제점

해당 스크린샷 처럼 modal이 해당 요소 내부에 존재하고 있다.
문제가 없을 수도 있지만 이럴 경우 부모 요소에 따라 영향을 받게 된다.

내가 원하는 방향은 modal 등의 요소는 최상위에 위치하는게 맞다고 생각한다.
body요소 최상단 또는 최하단에 배치하거나 root에 배치하고 싶다.

그러다 알게 된게 create portal이다.

해당 링크를 참고해 modal을 리팩토링할 예정이다.
react create portal sample

createPortal?

컴포넌트를 렌더링할 위치를 DOM 트리의 다른 곳으로 지정할 수 있도록 해준다.
주로 Modal, Tooltip, BottomSheet 등 특수한 요소에 사용한다.

createPortal(children, domNode, key?)

children
: React로 렌더링할 수 있는 모든 것, JSX, Fragment, 문자열이나 숫자 또는 이러한 요소들의 배열 (ex. <div />, <Component /> 등)
domNode
: DOM 노드가 있어야 할 위치 (ex. document.body 등)
key(선택)
: portal 키로 사용될 고유한 문자열이나 숫자

용법

DOM의 다른 부분에 렌더링

Portal을 사용해 모달 대화 상자 렌더링

React 구성 요소를 React가 아닌 DOM 노드로 렌더링
createPortal - react docs

리팩토링하기

1. rootPortal 추가하기

root 상단에 rootPortal을 추가해 줬다.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/nav_logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PokeDex</title>
  </head>
  <body>
    <div id="rootPortal"></div>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

2. Portal 컴포넌트 생성

portal을 modal 말고도 다른 요소에서도 사용할 수 있도록
독립적인 컴포넌트로 생성해 줬다.

import { ReactNode } from 'react';
import { createPortal } from 'react-dom';

const Portal = ({ children }: { children: ReactNode }) => {
  const rootPortal = document.getElementById('rootPortal') as HTMLElement;

  return createPortal(children, rootPortal);
};

export default Portal;

이전 코드에선 Modal 컴포넌트를 따로 만들지 않았지만
이번엔 컴포넌트를 분리해 작업해 줬다.

뒤에 배경이 필수적으로 들어가고
클릭 시 닫혀야하기에 DropBox에 actionFn이라는 prop을 추가했다.

import styled from 'styled-components';
import DropBox from '../box/DropBox';
import Portal from '../portal';
import { ReactNode } from 'react';

const Modal = ({ children, actionFn }: { children: ReactNode; actionFn: () => void }) => {
  return (
    <Portal>
      <ModalContainer>
        <ModalWrapper>{children}</ModalWrapper>
        <DropBox actionFn={actionFn} />
      </ModalContainer>
    </Portal>
  );
};

export default Modal;

모달로 표시되길 원하는 컴포넌트를 감싸주면 끝

 {modal && nameId === name && (
   <Modal actionFn={() => dispatch(overlayMadalActions.toggleModal())}>
     <PokemonDetail name={name} />
   </Modal>
 )}

카드 컴포넌트 클릭 시 rootPortal로 요소가 생성되는걸 확인할 수 있다.

마치며

createPortal에 대해 글로만 대략 알고 있었는데 이렇게 적용 할 수 있던 기회였다.

이전엔 항상 해당 요소 근처에 표시 되도록 했는데
학습했던 기억과 지금 진행하고 있는 사이드 프로젝트를 통해
createPortal로 modal, tooltip 등을 관리하는 걸 알게 되었다.
~~(너무 늦게 알아 문제...)~~

지금은 간단하게 동작하는 방식만 익히는 정도로
토이 프로젝트 코드를 리팩토링 했다.

modal 코드를 수정하면서 예전의 내가 실수한 코드도 같이 수정 할 수 있던 계기가 되었다.

나중엔 index.html에 div요소를 추가하는 방식이 아닌
동적으로 생성되고 제거 되도록 리팩토링 할 예정이다.

또한 id 값도 역할에 맞게 변경되도록 할 예정이다. ~~(지금은.. 집중력 하락..)~~

리팩토링할 경우 해당 내용도 수정 예정

+) 간만에 토이 프로젝트 코드를 보니 리팩토링할 부분이 많았다 다시 시간 될 때 틈틈이 수정해 보자.

[프론트 애송이] 작은 깨달음도 기록하기

[🕹️ 토이 프로젝트] create portal를 통한 modal 코드 개선해 보기

프로젝트/클론코딩

시작

문제점

createPortal?

용법

리팩토링하기

1. rootPortal 추가하기

2. Portal 컴포넌트 생성

3. Modal 컴포넌트 생성

4. Modal 컴포넌트 추가하기

마치며

0개의 댓글