2. 라우트 이동

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 SPA 어플리케이션 안에서 다른 라우트로 이동하는 방법에 대해서 알아보도록 하겠습니다.

* 포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요.

<Velopert 님의 리액트 라우터 강좌> https://velopert.com/3411

Link 컴포넌트

SPA 안에서 라우트간의 이동은 HTML 의 <a> 태그를 이용하지 않습니다.

<a> 태그는 페이지 전체를 다시 로딩, 즉 새로고침 해버립니다.

따라서 새로고침하지 않고 라우트로 이동하고자 할 때는 리액트 라우터의 Link 컴포넌트를 이용합니다.

Link 컴포넌트를 사용하면 페이지 전체를 새로고침 하지 않고, 이동을 원하는 라우트로 화면을 전환해 줍니다.

Link 컴포넌트를 사용하여 Header 컴포넌트를 만들어 봅시다.

(src/components/Header.js)

import React from 'react';
import { Link } from 'react-router-dom';
import './Header.css';
 
const Header = () => {
    return (
        <div className="header">
            <Link exact to="/" className="item">홈</Link>
            <Link to="/about/pro-self-studier" className="item">소개</Link>
        </div>
    );
};
 
export default Header;
 

코드의 두 번째 줄에서 리액트 라우터의 Link 컴포넌트를 불러왔습니다.

8-9번째 줄에서 Link 컴포넌트를 이용하여 '/' path 와 '/about/pro-self-studier' path 로 이동시키는 링크를 만들었습니다.

위에서 만든 Header 컴포넌트를 더 예쁘게 만들기 위해 스타일을 추가해 보겠습니다.

(src/components/Header.css)

.header {
    background: #5c7cfa;
    display: flex;
    width: 100%;
}
 
.item {
    flex-grow: 1;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
}
 
.item:hover {
    background: #748ffc;
}

flex 를 이용하여 헤더의 디자인은 꾸몄습니다.

* CSS 의 레이아웃 디자인 도구인 flex 에 익숙하지 않으신 분들은 아래의 링크를 참조해 주세요

<ㅇㅇ>

* JSX 에서 HTML 태그나 컴포넌트에 class 를 정의할 때는 class 가 아닌 className 속성을 이용한다.

그럼 이제까지 만든 Header 컴포넌트를 App 컴포넌트에 추가해 주도록 합시다.

(src/shared/App.js)

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { Home, About } from 'pages';
import Header from 'components/Header';
 
class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                <Route exact path="/" component={Home}/>
                <Switch>
                    <Route path="/about/:name" component={About}/>
                    <Route path="/about" component={About}/>
                </Switch>
            </div>
        );
    }
}
 
export default App;

코드의 4번째 줄에서 Header 컴포넌트를 불러와 10번째 줄에서 사용했습니다.

브라우저 안에서 Header 컴포넌트가 제대로 동작하는지 살펴보도록 하겠습니다.

프로젝트 경로에서 npm start 를 통하여 어플리케이션을 실행합니다.

헤더에서 소개버튼과 홈 버튼을 눌렀을 떄 페이지가 새로고침되지 않고 바로 헤당 페이지로 이동되는것을 알 수 있습니다.

* Link 컴포넌트에 전달되는 props 들은 컴포넌트 내부의 DOM 에도 전달되므로, 일반 DOM 엘리먼트에 설정하는 것 처럼 className, style 혹은 onClick 등의 이벤트를 전달해 줄 수 있습니다.

NavLink 컴포넌트

NavLink 컴포넌트는 Link 컴포넌트와 비슷합니다. 

특징이 있다면, NavLink 컴포넌트는 설정한 URL 경로가 활성화 되면, 해당 컴포넌트에 특정 스타일 또는 클래스를 지정할 수 있습니다.

(src/components/Header.js)

import React from 'react';
import { NavLink } from 'react-router-dom';
import './Header.css';
 
const Header = () => {
    return (
        <div className="header">
            <NavLink exact to="/" className="item" activeClassName="active">홈</NavLink>
            <NavLink to="/about/pro-self-studier" className="item" activeClassName="active">소개</NavLink>
        </div>
    );
};
 
export default Header;

위에서 Link 컴포넌트를 사용했던 부분을 NavLink 컴포넌트로 변경해 주었습니다.

URL 경로가 활성화 됐을 때, 특정 클래스를 지정하려면 NavLink 컴포넌트에 activeClassName 을 지정해 주면 됩니다.

8-9번째 줄에서 activeClassName 을 active로 지정했기 때문에 CSS 에서 active 클래스에 스타일을 지정해 줍시다.

(src/components/Header.css)

.header {
    background: #5c7cfa;
    display: flex;
    width: 100%;
}
 
.item {
    flex-grow: 1;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
}
 
.item:hover {
    background: #748ffc;
}
 
.item:active, .item.active {
    background: white;
    color: #5c7cfa;
}

21-24 번째 줄에서 active 스타일을 지정해 주었습니다.

브라우저에서 확인하면 위와 같이 활성화된 URL 의 NavLink 컴포넌트에 active 스타일이 적용된 것을 알 수 있습니다.

여기까지...

SPA 어플리케이션 안에서 라우트 이동을 하는 Link 컴포넌트와 NavLink 컴포넌트에 대해서 알아보았습니다.

<a> 태그를 사용하지 않고 이동한다는 것을 기억해 주시고, NavLink 컴포넌트에는 URL 에 따라 스타일을 다르게 지정할 수 있다는점도 숙지하시길 바라겠습니다.

그럼 다음 포스팅에서는 라우트 내부에 라우트를 설정하는 방법에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://velopert.com/3417

*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)