[React] React Router(리액트 라우터) 사용해보기

지난 포스팅까지 해서 완성했던 게시판을 조금 다듬어보려고 한다.

 

VIEW는 전혀 신경 쓰지 않고 오로지 CRUD만 구현했으니..

목록/상세/글 작성/글 수정 페이지를 구분해보려고 한다.

 

그러기 위해서 리액트에서 제공하고 있는 '라우터' 라이브러리를 활용하겠다.

 

그전에 알아야 할 것이 있다.

 

'페이지 이동'이라고 하면 일반적으로 2개의 페이지(A와 B)가 있고, A페이지에서 B페이지로 이동 혹은 B페이지에서 A페이지로 이동하는 것을 생각할 수 있다.

 

하지만 리액트는 SPA(Single Page Application) 방식으로 동작하기 때문에 조금 다르다.

실제 페이지는 Single Page 즉, 1개뿐이며 A와 B는 컴포넌트 개념으로 존재한다.

 

하나의 페이지에서 A컴포넌트를 렌더링 했다가 B컴포넌트로 렌더링을 하고 있기 때문에 페이지가 이동한 것처럼 보일 뿐이지 실제로 페이지 이동을 한 것은 아니다.

 

그래서 Router 라이브러리가 하는 일이 바로 사용자가 특정 주소를 입력해서 들어왔을 때 그 주소에 해당하는 컴포넌트를 연결해주는 역할을 한다.

 

이론은 이 정도로 정리하고.. 글로만 보면 무슨 말인지 이해가 어려울 수 있으니 실제 적용을 해보자.

 

반응형

 

먼저, Router 라이브러리를 설치한다.

 

npm install react-router-dom

 

 

현재 나의 App.tsx 렌더링 하는 부분은 아래와 같이 되어있다.

 

render() {
    return (
        <div className="App">
            <BoardList
                isComplete={this.state.isComplete}
                handleModify={this.handleModify}
                renderComplete={this.renderComplete}
            ></BoardList>
            <Write
                isModifyMode={this.state.isModifyMode}
                boardId={this.state.boardId}
                handleCancel={this.handleCancel}
            ></Write>
        </div>
    );
}

 

보시다시피 한 페이지에 목록(BoardList)과 글쓰기(Write) 화면이 같이 있다.

 

아래 소스코드를 추가 및 변경한다.

 

// import Router
import { BrowserRouter, Routes, Route } from "react-router-dom";


// render
render() {
    return (
        <div className="App">
            <BrowserRouter>
                <Routes>
                    <Route
                        path="/"
                        element={
                            <BoardList
                                isComplete={this.state.isComplete}
                                handleModify={this.handleModify}
                                renderComplete={this.renderComplete}
                            ></BoardList>
                        }
                    ></Route>

                    <Route
                        path="/write"
                        element={
                            <Write
                                isModifyMode={this.state.isModifyMode}
                                boardId={this.state.boardId}
                                handleCancel={this.handleCancel}
                            ></Write>
                        }
                    ></Route>
                </Routes>
            </BrowserRouter>
        </div>
    );
}

 

 

추가된 부분 설명

<BrowserRouter> 컴포넌트

html5를 지원하는 브라우저의 주소를 감지한다.

 

<Routes>, <Route> 컴포넌트

<Routes> 컴포넌트는 여러 Route를 감싸서 그중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
<Route> 컴포넌트는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭 하고 싶은 경우 URL 뒤에 *을 사용하면 된다. 예를 들면 내가 지정한 임의 path 외에 다른 path를 호출할 경우 Page Not Found와 같은 화면을 띄워주고 싶을 때 사용하면 된다.

 

루트 경로인 "/"로 접속하면 목록 화면을 렌더링 하고, "/write" 경로로 접속하면 글쓰기 화면을 렌더링 하도록 설정하였다.

 

그럼 '글쓰기' 버튼을 누르면 글 작성 화면으로 이동하고, 다시 '취소' 버튼을 누르면 목록 화면으로 돌아오도록 해보자.

 

BoardList.tsx와 Write.tsx 파일을 각각 수정한다.

 

// import Link
import { Link } from "react-router-dom";

// BoardList.tsx 변경
<Link to="/write">
    <Button variant="info">글쓰기</Button>
</Link>


// Write.tsx 변경
<Link to="/">
    <Button variant="secondary" onClick={this.props.handleCancel}>
        취소
    </Button>
</Link>

 

그리고 적용된 내용을 확인한다.

 

localhost:3000

 

 

 

localhost:3000/write

 

 

 

그다지 어렵진 않은 것 같다.

이런식으로 router를 활용하면 되겠다.