TIL 모달 컴포넌트 관리 위치

[sgoldenbird]

📌 배운 내용 요약

• 모달 컴포넌트는 무조건 전역에서 관리하기보다, 사용되는 범위(전역 vs. 페이지 단위)에 따라 렌더링 위치를 결정하는 것이 중요함
• App.jsx에 불필요한 모달을 두면 모든 페이지에서 렌더링되므로 성능상 비효율적
• 전역 상태 관리와의 연동이나 여러 페이지에서 공통으로 사용된다면 전역, 특정 페이지에서만 사용된다면 해당 페이지에서 조건부 렌더링하는 방식이 유지보수에 유리함

---

🔍 배경 / 문제 상황

관련 데일리 스크럼

📁 src/
├── 📁 components/
│   ├── 📁 voteModal/          
│   │   ├── VoteModal.jsx
│   │   ├── voteModal.styles.js
│   │   └── indexl.js
│   └── ... 
├── App.js
└── main.js  

• 위의 폴더구조에서 VoteModal은 아래와 같이 App컴포넌트 내부의 main안에서 전역으로 렌더링되고 있었습니다.

import { Outlet } from 'react-router-dom';
import VoteModal from './components/voteModal';

function App() {
  return (
    <main>
      <Outlet />
      <VoteModal />
    </main>
  );
}

export default App;

• 하지만 VoteModal은 실제로는 리스트 페이지에서만 사용하는 컴포넌트이기 때문에, App.jsx에서 항상 렌더링하는 것은 불필요한 렌더링이 발생할 수 있어 비효율적이란 생각이 들었습니다.
• 또한 만약 전역에서 사용한다 해도, 의미상 main 바깥으로 위치를 옮기는 것이 구조적으로 더 명확합니다.

그래서 VoteModal을 전역 컴포넌트로 두지 않고, 리스트 페이지 내에서만 조건부 렌더링하도록 변경하는 것을 제안했습니다.
이렇게 하면

• 필요한 페이지에서만 컴포넌트가 렌더링되므로 성능과 책임 분리 측면에서 유리
• 페이지 단위 로직과 UI가 한 곳에 모여 유지보수도 쉬움

// 예: ListPage.jsx 내부
import VoteModal from '@/components/voteModal';

function ListPage() {
  const [isVoteOpen, setIsVoteOpen] = useState(false);

  return (
    <>
      {/* 리스트 UI */}
      {isVoteOpen && <VoteModal />}
    </>
  );
}

그런데 팀원들과 회의를 해보니 다음과 같은 이유로 VoteModal을 전역에 두는 편이 낫다는 의견도 있었습니다.

- context나 store를 통해 전역 상태 기반으로 관리하는 구조와 궁합이 좋다
VoteModal이 단순히 "리스트 페이지의 구성요소"가 아니라, 앱 전체에서 통일된 동작 흐름이 필요한 경우(예: 전역 모달 관리), 전역 컴포넌트로 두는 게 더 일관적이라는 의견이 있었음. 즉, 여러 페이지에 걸쳐 사용되는 다른 모달이 있다면 이 모달과의 일관성을 위해 전역에서 사용하자는 의견.

---

✅ 해결 방법 또는 핵심 정리

우선 VoteModal의 범위를 페이지 단위인지 / 전역 기능인지 확실히 정하고 나머지 모달들이 범위도 확실히 파악하는 것이 먼저였습니다.
그리고 확인해보니 크레딧 충전 모달, 크레딧이 부족할 경우 모달, 후원하기 모달, 투표 모달 총 4개의 모달이 있었고
모두 리스트페이지에서만 필요했습니다.
그래서 우리팀은 리스트페이지에서 모달을 처리하는 것으로 하되,
모달 관련 로직은 리스트페이지 안에 작성하지 않고 따로 파일을 만들어서 분리했습니다.
리스트페이지는 그 로직을 불러서 사용하는 것으로 구현했습니다.

---

🧠 느낀점 및 생각 메모

이번 논의를 통해 모달의 위치와 역할도 구조적으로 고민해야 한다는 걸 느꼈습니다.
무조건 전역에서 관리하는 게 좋다고 생각할 수 있지만, 실제로 필요한 범위와 성격을 확인해보니 페이지 단위 렌더링이 더 적절한 경우도 많았습니다.
앞으로도 기능의 범위를 먼저 정확히 파악하고 나서 구조를 결정하는 습관이 중요하다는 걸 배웠습니다.

[yuj2n]

현재 모달 창 공통 컴포넌트 기능 구현에 있는데, 저 또한 구조적으로 어떻게 작성하는 것이 좋을 지 더 고민해볼 수 있게 되어 많은 도움이 되었습니다!

아무래도 리스트 페이지에서만 사용되는 모달이라면, App.jsx 같은 전역 레벨에서 VoteModal을 포함시킬 필요 없고, ListPage.jsx 내부에서만 조건부로 렌더링하는 게 적절한 접근인 것 같습니다!