플래그로 손수 맞추는 모드 전환

카테고리: state · 이 패턴은 8기 PR 26건 중 8건에서 관찰됩니다.

popular/search 모드 전환을 플래그와 분산된 페이지 슬롯으로 수동 동기화한다.

popularMoviePage, searchMoviePage, isSearch, currentQuery 같은 플래그를 상태 객체에 흩뿌려 두고 컨트롤러 곳곳에서 직접 set하는 패턴입니다. 동일한 “현재 목록” 개념이 여러 슬롯으로 분리되어, 모드 전환 한 번에 여러 곳을 수동으로 맞춰야 합니다.

문제 코드

다음은 실제 8기 크루 PR에서 추출한 코드입니다. 작성자는 익명 처리하고 원본 PR 링크만 남깁니다.

사례 1

this.#state = {
  popularMoviePage: 1,
  searchMoviePage: 1,
  searchString: "",
};

popular/search 페이지 번호가 별도 슬롯으로 분리되어 모드 전환 시 둘 다 손으로 갱신해야 합니다. 원본: PR #283  · src/App.ts

사례 2

#popular = new PopularMovies();
#searched = new SearchedMovies();
#mode: AppMode = "popular";

popular/searched 객체가 각자 currentPage를 들고, App은 mode를 따로 관리해 동일 개념이 세 군데로 흩어집니다. 원본: PR #269  · src/App.ts

사례 3

async #handleSearch() {
  this.#appState.resetSearch();
  this.#addButtonView.show();
  this.#appState.setValue(this.#searchView.getValue());
  searchController();
  this.#appState.setIsSearch(true);
  this.#movieBannerView.hide();
}

isSearch/searchValue/page는 AppState에 있지만 뷰 표시 순서가 컨트롤러 곳곳으로 분산되어 상태 전이가 흩어집니다. 원본: PR #272  · src/controller/mainController.ts

스스로 진단해보기

해설을 펼치기 전에 다음 질문에 답한다.

1. 현재 보여 주고 있는 목록을 표현하는 데 정말 필요한 최소한의 상태 변수를 적는다.
2. isSearch 플래그를 없애고 query 문자열만 두면 어떤 분기가 사라지는지 판단한다.
3. 두 페이지 카운트가 의미상 같은지 다른지 한 줄로 설명한다.

해설

개선 방향

Before

state = {
  popularMoviePage: 1,
  searchMoviePage: 1,
  searchString: "",
  isSearch: false,
};

After

// 단일 진실의 출처
state = {
  query: "",   // "" 이면 popular, 그 외엔 search
  page: 1,
};
 
const isSearch = () => state.query !== "";

핵심 변화는 동일 개념을 여러 슬롯으로 쪼개지 않고 query와 page 두 개로 정규화하고, isSearch 같은 플래그를 파생값으로 계산하도록 바꿨다는 점입니다.

더 알아볼 개념

• URLSearchParams 
• History API 
• State (Glossary)