Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

React-Router와 React-Transition-Group 모듈을 사용해 제작하는 단일 페이지 React 애플리케이션

by
Difficulty:IntermediateLength:ShortLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

페이지 전환 애니메이션이 들어간 멀티 페이지 React 애플리케이션을 제작하는 데 react-router와 react-transition-group 모듈이 사용되는 것을 이 튜토리얼에서 보여드리겠습니다.

React 앱 준비하기

create-react-app 패키지 설치하기

React를 사용해 볼 기회가 있었다면 아마 create-react-app 패키지에 관해 들어본 적이 있을 것입니다. 엄청 쉽게 React 개발 환경으로 시작할 수 있는 패키지입니다.

이 튜토리얼에서 React 앱 제작을 시작하는 데 이 패키지를 사용하겠습니다.

자, 우선 여러분의 컴퓨터에 Node.js 가 설치되어 있는지 확인해 보세요. 그 역시 npm을 설치하게 될 것입니다.

터미널에서 npm install -g create-react-app을 실행합니다. 이 명령문은 컴퓨터에서 create-react-app을 전역적으로 설치할 것입니다.

작업을 마치면 create-react-app -V를 쳐서 설치가 제대로 되었는지 확인하면 됩니다.

React 프로젝트 생성하기

이제는 React 프로젝트를 제작할 때네요. create-react-app multi-page-app을 실행하세요. 물론 multi--page-app이 아닌 원하는 다른 이름으로 대체해도 됩니다.

자, create-react-appmulti-page-app인 폴더를 하나 생성할 것입니다. 디렉토리를 변경하기 위해 cd multi-page-app을 입력하고 npm start를 실행해 로컬 서버를 가동합니다.

됐습니다. 로컬 서버에서 React 앱이 작동 중입니다.

이제는 기본 파일들을 정리하고 애플리케이션을 준비해 봅시다.

src 폴더에서 App.jsindex.js를 제외하고 모두 삭제하세요. 그런 다음,  index.js를 열어 아래의 코드로 내용을 변경하세요.

저는 기본적으로 registerServiceWorker와 관련된 라인과 import ‘./index.css’; 라인도 삭제했습니다.

App.js 파일에서도 아래 코드로 바꿔주었습니다.

이젠 필요한 모듈들을 설치하겠습니다.

터미널에서 react-routerreact-transition-group 모듈을 제각각 설치하기 위해 다음의 명령문을 입력하세요.

npm install react-router-dom --save

npm install react-transition-group@1.x --save

패키지를 설치한 후, 메인 프로젝트 안에 있는 package.json 파일을 열어 해당 모듈이 dependencies 아래 들어 있는지를 확인할 수 있습니다.

Router 컴포넌트

기본적으로 두 가지의 서로 다른 router 옵션이 있습니다. HashRouterBrowserRouter입니다.

명칭에서 알 수 있듯이 HashRouter는 링크를 추적하는 데 해시를 사용하며, 정적인(static) 서버에 적용하는 것이 적절합니다. 반면 동적인 서버라면, URL이 좀 더 상황에 맞게 쓰인다는 면을 고려해 BrowserRouter를 사용하는 것이 나은 선택입니다.

둘 중에 한 가지를 선택했다면, 계속 진행하며 컴포넌트를 index.js 파일에 추가해 주세요.

import { HashRouter } from 'react-router-dom'

그 다음에는 <App> 컴포넌트를  router 컴포넌트로 감싸줍니다.

그러면 index.js 파일은 결국 아래와 같이 보여야 합니다.

여러분이 동적인 서버를 사용해 BrowserRouter를 이용하려 한다면, 단 하나의 차이점은 BrowserRouter를 import해서 <App>  컴포넌트를 감싸주면 됩니다.

<App> 컴포넌트를 감싸줌으로써 애플리케이션에서 history 오브젝트를 서비스하게 되며, 그럼으로써 다른 react-router 컴포넌트들이 서로 소통할 수 있습니다.

<App/> 컴포넌트 안에서

<App> 컴포넌트 안에는 <Menu><Content>로 명명된 2개의 컴포넌트가 있습니다. 그 이름에서 알 수 있듯이 네비게이션 메뉴와 콘텐츠가 각각 담겨 있습니다.

src 디렉토리에서 “components” 폴더를 새로 만들고 나서 Menu.jsConent.js 파일을 만드세요.

Menu.js

Menu.js 컴포넌트를 작성해 봅시다.

state와 라이프사이클이 필요 없기 때문에 컴포넌트는 stateless 함수형 컴포넌트가 될 것입니다.

여기에는 링크가 될 <ul> 태그와 <li> 태그가 있습니다.

Menu 컴포넌트에 아래 문구를 추가하세요.

import { Link } from 'react-router-dom'

그리고 <Link> 컴포넌트로 <li> 태그의 내용을 감싸줍니다.

<Link> 컴포넌트는 <a> 태그의 역할을 하는 필수  react-router 컴포넌트입니다. 그러나 새 타깃 링크로 페이지를 다시 로드하지 않습니다.

마찬가지로 CSS에서 a 태그에 스타일을 적용한다면 그 스타일이 <Link> 컴포넌트에 동일하게 적용됩니다.

<Link> 컴포넌트에 <NavLink> 라는 진보된 버전이 있다는 것을 알고 계세요. 그 버전에서는 active 링크에 스타일을 줄 수 있는 추가적인 피처를 제공하고 있습니다.

각 링크가 어디로 가야할지 정해야 합니다. 그렇게 하기 위해서는 <Link> 컴포넌트에 to라는 prop을 넣습니다.

Content.js

<Content> 컴포넌트 안에서 Links와 일치하는 Route를 정의하겠습니다.

react-router-dom에서 SwitchRoute 컴포넌트를 가져와야 합니다. 자, 우선  그 컴포넌트들을 import 하세요.

import { Switch, Route } from 'react-router-dom'

그 다음에는 이동하려는 컴포넌트들을 import 합니다. 예를 들면, Home, Works, About과 같은 컴포넌트들입니다. 여러분이 이미 그 컴포넌트들을 components 폴더에 만들었다고 가정하므로 그것을 import 하세요.

import Home from './Home'

import Works from './Works'

import About from './About'

무엇이든지 그러한 컴포넌트가 될 수 있습니다. 저는 그 컴포넌트들을 최소한의 내용을 담고 있는 stateles 함수형 컴포넌트로서 정의했습니다. 예제 템플릿이 아래에 있습니다. 아래 형식을 3가지 컴포넌트에 모두 사용할 수 있습니다. 다만, 잊지 말고 각각 그에 알맞는 이름으로 변경해 주어야 합니다.

Switch

<Route> 컴포넌트들을 하나로 묶는 데 <Switch> 컴포넌트를 사용하겠습니다. Switch는 모든 Route를 찾은 다음 첫번째로 일치하는 하나를 넘겨줍니다.

Route

Route는 path prop 값이 일치는 타깃 컴포넌트를 부릅니다.

Content.js 파일의 최종 버전은 다음과 같습니다.

주요 디렉터리인 Home 컴포넌트에 exact prop이 반드시 있어야 한다는 것을 잊지 마세요. exact를 사용하면 Route가 경로명과 정확히 일치하도록 해줍니다. 이를 사용하지 않는다면 아마 / 로 시작하는 다른 경로명도 Home 컴포넌트와 일치한다고 할 지도 모릅니다. 그리고 각 링크가 Home 컴포넌트로 이동해 보여질 수도 있습니다.

이제 메뉴의 링크를 클릭하면 app은 해당 콘텐츠로 바뀌게 될 것입니다.

Route 전환 애니메이션

여기까지는 동작하는 router 시스템을 작업했습니다. 이제는 route 전환 애니메이션을 작업하겠습니다. 그 작업을 위해서  react-transition-group 모듈을 사용할 것입니다.

각 컴포넌트의 mounting state에서 애니메이션이 보여질 것입니다. Switch에 있는 Route 컴포넌트를 이용해 다른 컴포넌트로 경로를 잡았을 때 그에 알맞게 다른 컴포넌트들에  mountingunmounting 해주어야 합니다.

애니메이션을 넣고 싶은 컴포넌트에 react-transition-group을 사용하겠습니다. 그렇게 해서 해당 컴포넌트마다 서로 다른 mounting 애니메이션을 적용할 수 있습니다.

본보기로 <Home> 컴포넌트에 적용해 보죠.

먼저, CSS Transition Group을 import 하세요.

import { CSSTransitionGroup } from 'react-transition-group'

그 다음에 그 컴포넌트로 콘텐츠를 감싸줍니다.

현재는 컴포넌트의 mounting state를 다루는 중이므로 transitionAppear를 이용해 timeout 를 설정하겠습니다. transitionEntertransitionLeave는 비활성화 하겠습니다. 왜냐하면 이 둘은 컴포넌트가 연결될 때에만 유효하기 때문입니다. 만일 여러분이 컴포넌트의 자식들(children)을 애니메이션 시키고자 한다면 이 둘을 사용해야 합니다.

마지막으로 transitionName을 구체적으로 추가해 주세요. 그렇게 하면 CSS 파일에서 참조할 수 있습니다.

그와 더불어 CSS 파일을 import 했습니다. 그 파일에서는 CSS transition을 정의해 줍니다.

페이지를 새로고침 하면 Home 컴포넌트에서 fade in 효과를 보게 될 것입니다.

만약에 경로가 잡힌 나머지 컴포넌트 전체에 동일한 방식을 적용한다면 여러분이 Menu에서 콘텐츠를 변경할 때 각각의 애니메이션을 보게 됩니다.

마무리하며

이 튜토리얼에서 react-router-domreact-transition-group 모듈을 다루어 보았습니다. 이 두 가지 모듈에는 우리가 이 튜토리얼에서 다룬 것보다 더 많은 기능이 있습니다. 우리가 다룬 내용이 실제로 동작하는 데모 버전이 여기에 있습니다.

여러분이 더 많은 피처를 학습하기 위해서는 사용하려는 모듈에 관한 문서를 항상 자세히 읽어보세요.

지난 몇 년 간 React의 인기가 높아지고 있습니다. 실제로 구매, 후기, 실행 등이 가능한 마켓플레이스에 수많은 상품이 나왔습니다. React와 관련된 추가 자료를 찾고 있다면 망설이지 말고 그런 상품들을 확인해 보세요.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.