라우터 설계 — URL로 소환사 상태 관리하기

화면은 두 개다. 검색 화면과 전적 화면.

처음엔 검색 화면에서 소환사 정보를 state로 들고 전적 화면으로 넘기려 했다. 근데 새로고침하면 state가 날아간다. 전적 불러오는 데 시간이 걸리는데 새로고침할 때마다 처음부터 다시 검색해야 한다.

URL에 소환사 정보를 담기로 했다.

<Route path="/" element={<Home />} />
<Route path="/matches/:region/:name/:tag" element={<SummonerList />} />

검색하면 /matches/KR/Hide on bush/KR1 같은 URL로 이동한다.

const handleSearch = () => {
  navigate(`/matches/${region}/${name}/${tag}`);
};

전적 화면에서는 URL에서 파라미터를 꺼내 API를 바로 호출한다.

const { region, name, tag } = useParams();

useEffect(() => {
  axios.get("http://localhost:8080/user/matches", {
    params: { region, name, tag },
  }).then((res) => setMatches(res.data));
}, [region, name, tag]);

새로고침해도 URL이 그대로니까 파라미터를 다시 읽어서 API를 재호출한다. state를 넘길 필요도 없고, 링크로 공유하면 그 소환사 전적 화면이 바로 열린다.

의존성 배열에 region, name, tag를 넣어둔 덕분에 검색바에서 다른 소환사를 검색하면 URL이 바뀌면서 자동으로 재요청도 된다.

전적 화면 상단에 검색바를 다시 보여주고 싶었다. 새 컴포넌트를 만들 필요 없이 Home을 그대로 재사용했다.

// 홈 화면 — 중앙 정렬 전체 레이아웃
<Home />

// 전적 화면 상단 — 작은 검색바만
<Home className="home-top" />

className prop 하나로 레이아웃을 분기했다.