[React] Router를 활용하여 모달띄우기

들어가기 전에

React 수업을 들은 후, 팀 과제로 TMDB를 활용한 넷플릭스 클론 프로젝트를 진행하게 되었다.

프로젝트에서 각자 맡을 역할을 나누는 과정에서, 나는 자발적으로 모달 화면 구현을 담당했다.

 

사실 React 수업에서도 넷플릭스와 유사한 형식을 따라 개발했지만, 당시에는 개념적으로 헷갈리는 부분이 많았다.

그래서 이번 프로젝트를 통해 부족했던 부분을 더 깊이 이해하고자 했다.

 

Modal 화면을 구현하면서 수업에서 배웠던 방식(setModalOpen이라는 플래그를 사용해 모달을 띄우는 방식)을 떠올렸다.

그러나 넷플릭스의 실제 페이지를 살펴보니, 모달이 뜰 때 URL이 변경되는 것을 발견했다.

이와 같은 동작을 구현해보고 싶어 검색을 시작했고, React Router를 사용하면 모달을 URL 변경과 함께 띄울 수 있다는 것을 알게 되었다.

 

우선 해당 프로젝트는 react, npx-create로 만들었고, 언어는 Typescript를 사용했다.

 

시작하기

App.tsx

function App() {
	const location = useLocation();
	const state = location.state as { backgroundLocation?: Location };
	const background = state?.backgroundLocation;
	return (
        <div className="app">
            <Routes location={background || location}>
                <Route path="/" element={<Layout />}>
                    <Route path="browse" element={<HomePage />} />
                    .
                    .
                    .
                </Route>
            </Routes>
            {background && (
                <Routes>
                    <Route
                        path="movie/:id"
                        element={<DetailModal mediaType={MediaType.MOVIE} />}
                    />
                    <Route
                        path="tv/:id"
                        element={<DetailModal mediaType={MediaType.TV} />}
                    />
                </Routes>
            )}
        </div>
	);
}

- useLocation: 현재 URL에 대한 정보를 가져온다.

- state: 라우팅 시 전달 된 상태 데이터.

  - backgroundLocation: 모달을 열기 전 사용자가 보고 있던 페이지의 위치 정보를 저장.

  - 모달을 닫으면 이전 페이지로 돌아가기 위해 사용된다.

- { background || location }: background가 있으면 이전 페이지를 기준으로 UI 렌더링, 없으면 현재 location에 따라 랜더링

- {background && (~): background가 존재할 때만 실행

 

HoverItem.tsx

const navigate = useNavigate();
const location = useLocation();
    
// 클릭해서 모달 띄우는 부분
const handleClickCard = () => {
    switch (type) {
        case MediaType.MOVIE:
            navigate(`/movie/${id}`, {
                state: { backgroundLocation: location },
            });
            break;
        case MediaType.TV:
            navigate(`/tv/${id}`, {
                state: { backgroundLocation: location },
            });
            break;
        default:
            console.error("Unknown Media type");
    }
};

- backgroundLocation: 현재 보고있는 페이지 정보를 저장함으로써, 모달을 닫으면 이전 페이지로 돌아간다.

 

 

DetailModal.tsx

const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
    navigate(-1);
};

- DetailModal 에서는 따로 해준 것 없이 닫기 버튼을 눌렀을 때 뒤로가기가 되도록 했다.

 

결과

내가 원했던 대로 url도 바뀌고, 배경화면도 보이는 것을 확인할 수 있다.

 

 

처음 작업할 때 아이템 클릭했는데 계속 배경화면만 나왔다.. 멘붕..

하지만 자고 일어나서 참고한 문서를 차근차근 보니 HoverItem.tsx에 코드 작성을 안해준게 있어서 추가

역시 잘 안될 땐 자고 일어나는게 최고다.

 

 

참고

https://itchallenger.tistory.com/603

리액트 라우터 v6를 이용해 쉽게 모달 만들기