GraphQL React + Apollo Tutorial - 5. 라우팅

• 본 시리즈에서는 How to GraphQL의 Tutorial 문서들을 차례대로 번역합니다.
• 이 글은 GraphQL React + Apollo Tutorial - Routing을 번역한 글입니다.
• 본 시리즈는 GraphQL Basic and Advanced 시리즈와 GraphQL-Node Tutorial 시리즈에서 이어집니다. GraphQL을 처음 접하는 분들은 해당 시리즈를 먼저 읽고 오시는 것을 추천드립니다.
• 오역 또는 의역이 있을 수 있습니다. 양해 부탁드리며, 수정이 필요한 부분은 댓글로 요청해주세요.

이번 장에서는 Apollo와 함께 react-router 라이브러리를 사용하여 네비게이션 기능을 구현하겠습니다.

의존성 설치하기

우선, 어플리케이션에서 필요로 하는 의존성을 추가하겠습니다. 터미널을 열고, 프로젝트가 위치한 디렉토리로 이동한 뒤 아래와 같이 입력합니다.

($ .../hackernews-react-apollo)

yarn add react-router react-router-dom

헤더 생성하기

어플리케이션의 라우팅을 구성하기에 앞서, 사용자들이 어플리케이션 안에서 페이지 이동을 할 수 있도록 Header 컴포넌트를 생성해야 합니다.

src/components 디렉토리에 Header.js 라는 파일을 새롭게 생성합니다. 그리고 아래의 코드를 붙여넣기합니다.
($ .../hackernews-react-apollo/src/components/Header.js)

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { withRouter } from 'react-router'

class Header extends Component {
  render() {
    return (
      <div className="flex pa1 justify-between nowrap orange">
        <div className="flex flex-fixed black">
          <div className="fw7 mr1">Hacker News</div>
          <Link to="/" className="ml1 no-underline black">
            new
          </Link>
          <div className="ml1">|</div>
          <Link to="/create" className="ml1 no-underline black">
            submit
          </Link>
        </div>
      </div>
    )
  }
}

export default withRouter(Header)

위 코드는 LinkList 컴포넌트와 CraeteLink 컴포넌트 간에 이동할 수 있는 두 개의 Link 컴포넌트를 만드는 간단한 내용입니다.

우리가 만든 Link 컴포넌트와 위 코드에서 사용된 Link 컴포넌트는 서로 다른 것이므로 헷갈리면 안 됩니다. 단순히 우연하게 이름이 겹치는 것에 불과합니다. 여기서 사용된 Link는 react-router-dom 패키지에서 비롯된 것으로, 어플리케이션 내의 여러 라우팅 간에 이동할 수 있도록 하는 데에 사용됩니다.

라우팅 설정

어플리케이션이 다양한 라우팅은 이 프로젝트의 최상위 컴포넌트인 App에서 설정하게 됩니다.

App.js 파일을 열고 render 메서드를 수정하여 Header를 포함하도록 수정합니다. 또한 LinkList와 CreateLink가 서로 별도의 라우팅을 가지도록 수정합니다.
($ .../hackernews-react-apollo/src/components/App.js)

render() {
  return (
    <div className="center w85">
      <Header />
      <div className="ph3 pv1 background-gray">
        <Switch>
          <Route exact path="/" component={LinkList} />
          <Route exact path="/create" component={CreateLink} />
        </Switch>
      </div>
    </div>
  )
}

이 코드가 작동하려면, react-router-dom으로부터 필요한 의존성들을 불러와야 합니다.

App.js 파일 최상단에 아래의 내용을 추가합니다.
($ .../hackernews-react-apollo/src/components/App.js)

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

이제 App 컴포넌트를 BrowserRouter로 감싸서, App 컴포넌트의 자식 컴포넌트들이 라우팅 기능을 사용할 수 있도록 해줍니다.

index.js 파일을 열고 아래의 import 구문을 최상단에 추가합니다.
($ .../hackernews-react-apollo/src/index.js)

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

다음으로, ReactDOM.render 메서드를 아래와 같이 수정한 뒤, App 컴포넌트를 BrowserRouter로 감쌉니다.
($ .../hackernews-react-apollo/src/index.js)

ReactDOM.render(
  <BrowserRouter>                      // 수정
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </BrowserRouter>,
  document.getElementById('root')      // 수정
)

됐습니다. 다시 어플리케이션을 실행시키고 나면, 두 개의 URL에 접근이 가능해집니다. http://localhost:3000는 LinkList를 렌더링하고, http://localhost:3000/create는 4번째 글에서 만들었던 CreateLink 컴포넌트를 렌더링합니다.

네비게이션 구현하기

이번 장을 마무리하려면, 뮤테이션이 이루어진 뒤 CreateLink 컴포넌트로부터 LinkList 컴포넌트로 자동 리다이렉션이 발생하도록 만들어야 합니다.

CreateLink.js 파일을 열고, <Mutation /> 컴포넌트를 아래와 같이 수정합니다.
($ .../hackernews-react-apollo/src/components/CreateLink.js)

<Mutation
  mutation={POST_MUTATION}
  variables={{ description, url }}
  onCompleted={() => this.props.history.push('/')}                  // 수정
>
  {postMutation => <button onClick={postMutation}>Submit</button>}
</Mutation>

뮤테이션이 이루어진 뒤, 최상위 라우팅인 /에 접근할 수 있는 LinkList 컴포넌트로 페이지 이동이 이루어질 것입니다. 이것은 react-router-dom에 의한 동작입니다.

참고: 새롭게 생성된 Link가 화면에 나타나지 않고, 단지 최상위 라우팅으로 리다이렉트되는 것일 뿐입니다. 변동 사항을 확인하려면 새로 고침을 해야 합니다. Mutation이 이루어진 뒤 화면에 표시할 데이터를 갱신하는 방법은 More Mutations and Updating the Store 장에서 다루도록 하겠습니다!

Quiz

이번 장에서 추가한 Link 컴포넌트의 역할로 적절한 것은?

• 사용자가 게시한 링크를 렌더링한다
• 새로운 링크를 생성하고자 하는 사용자를 위한 입력 폼을 렌더링한다
• 다른 URl로 페이지 이동할 수 있도록 해준다
• 최상위 컴포넌트와 하위 자식 컴포넌트들을 서로 연결해준다