React hooks 리액트 훅 React Router Dom란?

React hooks 리액트 훅  React Router Dom란?

우리는 홈페이지에서 다른 홈페이지로 이동하려면,

즉 예를 들어 메인 페이지에서 About페이지로 이동하려면,

그에 맞는 HTML파일과 데이터들을 fetch 해야 했습니다.

하지만 리액트의 리액트 라우터 돔을 이용하면,

페이지의 이동이 아닌 각각의 페이지에 필요한 컴포넌트들을

불러와 보여주게 됩니다. 이는 좀 더 빠르고 다이내믹 해질 수 있어,

유저에게 조금 더 편안하고 만족스러운 경험을 줄 수 있습니다.

그럼 오늘도 여전히 전혀 비전문적이고 쉽게 알아보겠습니다.

 

 

목차.

1. React Router Dom란?
2. React Router Dom 사용 방법.
3. 마치며.

 

 

1. React Router Dom란?

 

앞서 말했듯이 리액트 라우터 돔을 이용하여, 페이지의 로딩 없이,

페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줍니다.

리액트의 강점 중 하나는 싱글페이지 어플리케이션이라는 것입니다.

즉 하나의 index HTML을 두고 컴포넌트들만 변경시켜 각각 개별적으로

사용하고 업데이트 하는것도 가능해집니다. 또한 여러 HTML파일이 필요하지 않아

코드도 짧고 서버도 많은 HTML파일을 다루지 않게됩니다.

React Router Dom는 모듈로써 사용을 위해서 NPM에서 다운로드를 해야 합니다.

또한 아주 유명하고 유용한 모듈이기에 Document가 잘 정리되어있어,

사용하기 너무 좋습니다.

 

 

2. React Router Don 사용 방법.

위에 언급했듯이 처음 사용을 위해서 설치를 해주어야 합니다.

설치는 아주 쉽습니다.

리액트 프로젝트를 생성하신 후 프로젝트 폴더로 이동하신 뒤

아래의 코드를 cmd 혹은 터미널에서 입력해주시면,

자동으로 설치가 완료될 것입니다.

 

npm i react-router-dom

 설치가 완료되면 메인 App 페이지 외 다른 홈페이지를 만들기 위해,

자바스크립트 파일을 두개 생성해주세요.

예를 들면 About.js 와 Info.js와 같이 만들어주시면 됩니다.

그 후 생성한 파일에 기본 리액트 훅에 필요한 요소들을 작성해주세요.

아래와 같이 작성해주시면 됩니다.

import React from 'react';

const About = () => {
  return <h1>This is about page</h1>;
};

export default About;

import React from 'react';

const Info = () => {
  return <h1>This is info page</h1>;
};

export default Info;

 

혹은 아래와 같이 짧게 만들어 줄 수 있습니다.

현재는 따로 적을 것이 없으니 아래의 코드와 같이 간략하게 적는 것을

추천드리고 항상 코드를 짧게 쓰려고 노력합시다.

import React from 'react';

const About = () => <h1>This is about page</h1>;

export default About;

import React from 'react';

const Info = () => <h1>This is info page</h1>;

export default Info;

 

 

또한 내비게이션을 위해서 Nav.js 또한 생성 후 아래의 코드와 같이 적어줍시다.

 

import React from 'react';

const Nav = () => (
  <nav>
    <h3>This is Logo</h3>
    <ul>
      <li>Main</li>
      <li>About</li>
      <li>Info</li>
    </ul>
  </nav>
);

export default Nav;

 

그 후 아래와 같이 App.js에 Nav, About 그리고 Info를 모두

import 해준 뒤 JSX로 사용해 줍시다. 아래의 코드와 같이 말입니다.

 

import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './about';
import Info from './Info';

const App = () => {
  return (
    <div className='App'>
      <Nav />
      <About />
      <Info />
    </div>
  );
};

export default App;

 

(내비게이션에 Info리스트를 실수로 적지 않고 사진을 찍었습니다.

그러하여 아래의 사진에 네비게이션에 info가 보이지 않습니다.

양해 부탁드립니다.)

 

 

 

그렇다면 렌더링 된 결과는

이러할 것입니다. css는 사용하지 않겠습니다.

자 보시면 위에 This is Logo부터  About까지는 Nav에서

This is about page는 About에서 그리고 This is info page는

Info에서 왔다는 것을 알 수 있습니다.

 

자 이번에는 아래의 코드를 App 파일에 import 해줍니다.

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

이 3가지는 아주 유용하고 자주 사용되니 알아두시면 좋겠지만,

까먹는다고 문제 되지는 않습니다. 우리에게는 가장 친한 친구.

구글이 있으니까요. 까먹거나 기억이 가물가물하시면 언제든지,

그낭 검색하시고 Document를 읽으시면 됩니다.

 

자 그 후 이렇게 만들어 줍시다.

 

import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './about';
import Info from './Info';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <div className='App'>
      <BrowserRouter>
        <Nav />
        <Switch>
          <Route path='/about' component={About} />
          <Route path='/info' component={Info} />
        </Switch>
      </BrowserRouter>
    </div>
  );
};

export default App;

 

이제 다시 결과를 보시면 이제는 더 이상 This is about page와 

This is info page를 볼 수 없습니다. 그렇다면 어떻게 해야 다시

이러한 텍스트를 볼 수 있을까요? 즉 About과 Info에 관한 정보를

가져올 수 있을까요?

 

이제는 URL을 변경해 봅시다. 아마 지금 현재는 로컬로 포트 3000번에 연결되어

있을 것입니다. 그렇다면 이제  Route의 path에 적어 둔 경로로 들어가 봅시다.

 

위와 같이 "/about"을 붙이니 This is about page라는 문구가 떴습니다.

"/info"라는 페이지를 적으니 This is info page라고 뜨는 것도 직접 확인 가능하실 것입니다.

하지만 아직 부족한 것이 있습니다.

이는 Route가 많고 비슷한 경로가 있다면 코드에 상단에 올라가 있는 부분이 먼저 렌더링 될 수 있다는

것입니다. 이를 막기 위해서 우리는 exact라는 것을 Route 안에 정해주어야 합니다.

이는 뜻과 같이 정확히 그 경로가 맞아야만 한다라는 전제를 주는 것입니다.

아래의 코드와 같이 말입니다.

 

    <div className='App'>
      <BrowserRouter>
        <Nav />
        <Switch>
          <Route exact path='/about' component={About} />
          <Route exact path='/info' component={Info} />
        </Switch>
      </BrowserRouter>
    </div>

 

자 이제 우리는 경로를 설정하는 방법을 알았습니다.

하지만 우리 대부분은 버튼이나 링크를 누르면서 홈페이지 안의 내용을 볼 것입니다.

즉 한 땀 한 땀 URL을 적어가면서 화면 혹은 페이지를 변화시키지는 않는다는 것입니다.

우리는 익숙하게 내비게이션이라는 것을 이용하여,

편하고 손쉽게 원하는 화면으로 들어가거나 전환할 수 있습니다.

그렇다면 전에 만들어 두었던 Nav라는 컴포넌트를 사용할 때입니다.

 

Nav 컴포넌트 안에도 react-router-dom을 import 해줍시다.

 

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

const Nav = () => (
  <nav>
    <h3>This is logo</h3>
    <ul>
      <Link to='/'>
        <li>Main</li>
      </Link>
      <Link to='/about'>
        <li>About</li>
      </Link>
      <Link to='/info'>
        <li>Info</li>
      </Link>
    </ul>
  </nav>
);

export default Nav;

 

이제 우리는 직접 링크를 적어 주지 않고 내비게이션의

Main, About, Info를 누르면 알아서 자동으로 URL이 변경되면서

URL에 맞는 페이지가 렌더링 되는 걸 볼 수 있습니다.

이렇게 쉽게 우리는 URL에 맞는 컴포넌트를 렌더링 하는 방법을 알게 되었습니다.

우리가 프로젝트를 만들고 한 가지 홈페이지가 아닌 여러 가지의 페이지로 나뉘게 된다면,

누구나 필요한 것이 react-router-dom입니다.

이를 이용해서 멋있는 페이지를 개발해보시기 바랍니다.

 

3. 마치며.

당연히 저는 아주 쉽게 한 가지 텍스트만 넣어놨지만,

그뿐 아니라 fetch 된 데이터 또한 바로 불러올 수 있습니다.

과연 어떻게 해야 할까요?

바로 useEffect입니다.

useEffect는 URL이 변하게 되면서 필요한 컴포넌트를 가져온 뒤

렌더링이 끝나면 무조건 한 번은 실행되게 됩니다.

useEffect와 관해 궁금하시다면 아래의 링크를 확인해주세요.

https://ko-de-dev-green.tistory.com/18?category=865864

React hooks 리액트 훅 useEffect란?

이렇게 useEffect, useState 그리고 react-router-dom만 있어도 사실 멋진 홈페이지를 

반 이상은 만드신 거나 다름없습니다. 다음은 자바스크립트에서 사용되는

fetch를 리액트에서는 axios를 이용하여 어떻게 쉽게 api를 사용하고 정보를 받아 올 수 

있는지 알아보겠습니다.

 

항상 도전하시고 공부하시는 모습이 멋집니다.

저 또한 가능하면 매일매일 공부하고 포스팅도 하려 합니다.

서로 같이 노력합시다!

오늘도 건강하시고 항상 도전하시기 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.