[DRF / React] 장고 리액트 연동하기 - 3. 리액트 개별 페이지 구현

시리즈 세번째 글입니다.

이번엔 각 페이지별로 [보드, 로그인, 회원가입, 로그아웃] 의 기능을 각각 나누기 위해

리액트에서 각 페이지를 나누는 방법을 알아보겠습니다.

 

https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React] react-router-dom 시작하기

https://coding-hyeok.tistory.com/8

React button onClick (버튼을 눌렀을 때 화면이동)

 

위 두 블로그를 참조했습니다.

 

react-router-dom 설치하기

# npm 사용시
npm i react-router-dom

# yarn 사용시
yarn add react-router-dom

잘 모르시겠으면 저희는 지난번 포스팅에서 말씀드렸던것 처럼 yarn을 사용하기로 했으니 아래껄 사용하시면 됩니다.

 

성공!

react-router-dom 활용하기

import 및 부가설명

이후 지난번 포스팅에서 생성했던 프로젝트 폴더로 들어가 코드 편집기를 열어주세요

(저는 Vscode를 사용중입니다.)

여기서 App.js 안에 있는 function App.js를 빈 함수로 만들께요

 

자 이러고 나서 최상단에 

import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";

를 추가해줄께요

 

 - BrowerRouter as Router 

history API 를 사용해서 URL 과 UI 를 동기화하는 라우터입니다. 길이가 너무 길어서 Router로 줄여 사용할께요

 

- Route

컴포넌트 속성(path)에 설정된 URL 과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링 합니다.

 

- Link

'a' 태그와  비슷한 역할을 합니다. to 속성으로 설정된 링크로 이동합니다. History 스택에 저장됩니다.

 

- Routes (Switch였다가 최근에 바뀌었습니다.)

자식 컴포넌트 Route 또는 Redirect중 매치되는 첫번째 요소를 렌더링합니다. Routes를 사용하면 BrowserRouter 만 사용 할 때와는 다르게 하나의 매칭되는 요소만 렌더링 한다는 점을 보장합니다.  Routes 를 사용하지 않을 경우 매칭되는 모든 것을 렌더링합니다.

 

여기서 잠깐! 컴포넌트란?

리액트를 이루는 최소한의 단위
재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다.

(출처 : https://goddaehee.tistory.com/299)

 

UI를 이루는 단위라고 생각하시면 됩니다.

 

저희는

- 홈 컴포넌트 : 로그인, 회원가입, 로그아웃 컴포넌트로 이동할 수 있는 컴포넌트

- 로그인 컴포넌트 : 로그인 UI 를 담고 있는 컴포넌트

- 회원가입 컴포넌트 : 회원가입 UI를 담고 있는 컴포넌트

- 로그아웃 컴포넌트 : 로그아웃 UI를 담고 있는 컴포넌트

- 보드 컴포넌트 : 게시판 UI를 담고 있는 컴포넌트 

 

총 이렇게 5가지의 컴포넌트를 제작할 예정이에요. 

 

컴포넌트 개별 렌더링 구현하기

각 컴포넌트를 렌더링 할 수 있도록 App function을 수정해 볼께요

import logo from './logo.svg';
import './App.css';
import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";

function App() {
  return(
    <Router>
        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/login" element={<Login/>}/>
          <Route path="/signup" element={<Signup/>}/>
          <Route path="/logout" element={<Logout/>}/>
          <Route path="/board" element={<Board/>}/>
        </Routes>
    </Router>
  );
}


export default App;

코드가 뭔가 어색하다고 느끼시는 분들이 계신가요?

그런 분들은 V5를 사용해보셔서 그럴꺼에요!

이전 버전과의 차이점은 아래 블로그를 참조해주세요

https://velog.io/@soryeongk/ReactRouterDomV6

[React] react-router-dom v6 업그레이드 되면서 달라진 것들

 

컴포넌트 구현하기

App Function 아래에다가 다음과 같은 컴포넌트 5개를 만들어줄께요

function Home() {
  return <h2> 홈 컴포넌트 입니다. </h2>;
}

function Login() {
  return <h2>로그인 컴포넌트 입니다.</h2>;
}

function Signup(){
  return (<h2> 회원가입 컴포넌트 입니다. </h2>);
}

function Logout() {
  return (<h2> 로그아웃 컴포넌트 입니다. </h2>);
}

function Board() {
  return (<h2> 보드 컴포넌트 입니다. </h2>);
}

자 이렇게 되면 최소한의 컴포넌트들은 구성이 완료되었습니다.

이제 터미널에서 

yarn start

를 입력해서 리액트를 열어볼께요

 

글쓰는 도중 캡쳐...ㅎㅎ

아무것도 없는 창에선 홈 컴포넌트가 나오는걸 볼 수 있어요.

 

자 이제 위의 URL뒤에 /login, /logout, /board, /signup 들을 각각 붙여보세요

각각 다른 컴포넌트들이 렌더링 되는걸 볼 수 있을 거에요.

각기 다른 컴포넌트들이 렌더링 되고 있습니다!

 

여기까지 따라오시느라 수고하셨습니다!

다음 포스팅에는 링크를 통해 각 컴포넌트를 이동시키는 방법을 알아보겠습니다.