[React] react-router-dom v6 프로젝트에 적용하기

개발 환경

React + TypeScript

Vite

개념

react-router-dom

react-router-dom는 React에서 SPA(Single Page Appliction)을 개발하는데 필수적으로 사용하는 라이브러리 중 하나입니다.

React(뿐만 아니라 전반적인 웹 프로젝트)에서 다른 페이지로 이동하는 전통적인 방법은 <a> 태그입니다.

<a href="https://www.angelplayer.com">AngelPlayer</a>

하지만 a 태그를 사용하면 경로 이동 시 페이지 전체를 로딩하기 때문에, 새로고침 되는 것 같이 화면이 깜박이는 현상이 발생합니다.

반면 react-router-dom과 <Link> 태그를 이용하면 전체 화면 중 변경되는 부분만 수정되어 출력됩니다.

Router Version

Router는 크게 Router v5 및 Router v6로 나뉩니다.

둘 다 많이 사용하고, 일부 사용법을 제외하면 큰 틀에선 차이가 없습니다.

저는 아래에서 Router v6로 설치 및 적용을 진행해보겠습니다.

설치 및 적용

npm install react-router-dom@6

# or

yarn add react-router-dom@6

npm i 또는 yarn을 통해서 설치가 가능합니다.

Router v6부터는 Type을 내장하고 있으므로, TypeScript를 사용하더라도 별도의 @types/ 설치는 필요로 하지 않습니다.

// main.tsx 기존 코드
ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

React 프로젝트 생성 후 최초의 main.tsx는 <React> 바로 하위에 <App>이 들어있습니다.

그렇기 때문에 프로젝트를 시작하자마자 App 컴포넌트가 출력됩니다.

이제부터는 어떤 화면을 보여줄 것인지를 Router를 통해서 관리하도록 코드를 수정해보겠습니다.

// main.tsx
ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                {/* <App /> */}
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
);

React 하위에 <BrowserRouter>와 <Routes>를 작성하였습니다.

BrowserRouter는 라우팅 기능을 활성화하고 관리하는 역할을 수행합니다.

Routes는 하위에 <Route> 태그를 통해 어플리케이션의 실제 경로와 경로에 연결된 컴포넌트를 정의합니다.

사용법

// Landing.tsx
export default function Landing() {
    const id = 'angel';

    return (
        <div id='display'>
            <div className='container'>
                <h1>Landing</h1>

                <Link to='app'>App</Link>
                <br />
                <Link to={`/member/${id}`}>Member</Link>
            </div>
        </div>
    );
}

// main.tsx
ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Landing />}></Route>
                <Route path='/app' element={<App />}></Route>
                <Route path='/member/:id' element={<Member />}></Route>
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
);

<Routes> 태그 하위에 <Route> 태그를 작성합니다.

<Route> 태그는 주소 경로, 주소 경로에 매핑될 컴포넌트 등을 작성합니다.

"/"는 도메인 뒤에 아무 것도 입력하지 않았을 때 이동하는 경로입니다.

추가적으로 주소를 통해 데이터를 받아오는 경우 "/:값"과 같은 형태로 사용할 수 있습니다.

주소로 이동하기

앞서 route를 통해서 "/" 경로로 접근 시 Landing 페이지로 이동하도록 구현하였습니다.

실제 브라우저에서 주소를 쳐서 이동하면 Landing 페이지가 잘 출력되는 것을 확인할 수 있습니다.

Link를 통해 이동하기

// Landing.tsx
export default function Landing() {
    const id = 'angel';

    return (
        <div id='display'>
            <div className='container'>
                <h1>Landing</h1>

                <Link to='app'>App</Link>
                <br />
                <Link to={`/member/${id}`}>Member</Link>
            </div>
        </div>
    );
}

a 태그 대신 Link 태그를 사용하면 화면의 깜빡임 없이 자연스럽게 화면 전환이 일어난다고 알려드렸습니다.

Link의 to 속성에 router에서 작성한 주소 경로를 입력하면 Link를 클릭 시 해당 페이지로 이동합니다.

member로 이동하는 Link의 경우 to 뒤에 /${id}가 붙어있는 것을 볼 수 있습니다.

이렇게 해서 다른 컴포넌트로 이동할 때 데이터를 함께 전달할 수 있습니다.

// Member.tsx
export default function Member() {
    const { id } = useParams();

    return (
        <div id='display'>
            <div className='container'>
                <h1>Member</h1>
                <p>{id}</p>
            </div>
        </div>
    );
}

넘긴 데이터는 useParams()를 통해서 변수에 저장할 수 있습니다.

넘겨받은 변수도 화면에 잘 출력되는 것을 확인할 수 있습니다.

이벤트 핸들러를 통한 이동하기

export default function Landing() {
    const id = 'angel';

    const navigate = useNavigate(); // useNavigate 훅 사용

    function moveAppHandler() {
    	console.log("야호! AngelPlayer");
        navigate('/app'); // /app 로 이동
    }

    return (
        <div id='display'>
            <div className='container'>
                <h1>Landing</h1>

                <Link to='app'>App</Link>
                <br />
                <Link to={`/member/${id}`}>Member</Link>
                <br />
                <button onClick={moveAppHandler}>Go to App</button>
            </div>
        </div>
    );
}

Link 태그를 사용하면 해당 하이퍼링크를 클릭 시 해당 페이지로 바로 이동하게 됩니다.

하지만 이동 전에 특정 로직을 수행하고 다음 화면으로 넘어가고 싶은 경우가 있습니다.

이런 경우 onClick과 같은 이벤트 핸들러에서 이동할 수 있도록 하는 useNavigate()를 사용하면 됩니다.

(v5는 useHistory()를 사용합니다.)

먼저 onClick 시 실행할 함수인 moveAppHandler()를 만들어 줬습니다.

다음으로 const navigate = useNavigate();를 선언한 후 함수 내 필요한 부분에서 navigate('이동경로');를 작성하였습니다.