programming language/react

[React] useReducer / React Router 사용하기

공대키메라 2022. 6. 12. 00:12

저번 시간에는 React.memo와 useCallback을 사용해봤다.

(궁금하면 여기 클릭!)

 

이번 시간에는 useReducer를 사용해볼 것이다. 

 

참고한 사이트는 다음과 같다. 

 

출처 :

https://ko.reactjs.org/docs/hooks-reference.html#usereducer

https://www.daleseo.com/react-hooks-use-reducer/

https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9A%B0%ED%8C%85

https://reactrouter.com/

https://reactrouter.com/docs/en/v6/getting-started/tutorial

https://reactrouter.com/docs/en/v6/routers/browser-router

 

1.useReducer 란?

useReducer에 대해서 알기 전에 state가 뭔지 다시 생각해보자.

 

React에서 상태(state)란 계속해서 변화하는 특정 상태이다. 상태에 따라 각각 다른 동작을 하도록 함에 목적을 둔다.\

 

이것을 관리하기 위해서 hook중 하나인 useState를 사용했었다.

 

이와 같은 기능을 하는 hook으로 useReducer가 있다.

 

useReducer를 사용하게 되면 우리가 각 component에서 사용하기 위해 선언한 useState 로직을 각각의 component에서 분리시켜 한곳에서 관리할 수 있다. 

 

이 예제를 기존에 사용하던 Count.js를 수정하면서 적용해보도록 하겠다.

Count.js

import { useState } from "react";

const Count = () => {
  const [count, setCount] = useState(1);
  const [str, setStr] = useState("1");

  const add1 = () => {
    setCount(count + 1);
    setStr(str + "+ 1 ");
  };

  const add10 = () => {
    setCount(count + 10);
    setStr(str + "+ 10 ");
  };
  const add100 = () => {
    setCount(count + 100);
    setStr(str + "+ 100 ");
  };
  const add200 = () => {
    setCount(count + 200);
    setStr(str + "+ 200 ");
  };
  const add300 = () => {
    setCount(count + 300);
    setStr(str + "+ 300 ");
  };
  const add500 = () => {
    setCount(count + 500);
    setStr(str + "+ 500 ");
  };
  return (
    <div>
      <div>history : {str}</div>
      {count}
      <br />
      <button onClick={add1}>add 1 :</button>
      <button onClick={add10}>add 1</button>
      <button onClick={add100}>add 100</button>
      <button onClick={add200}>add 200</button>
      <button onClick={add300}>add 300</button>
      <button onClick={add500}>add 500</button>
    </div>
  );
};

export default Count;

 

버튼을 클릭할 때 마다 덧셈이 되고 어떤 것이 계산됏는지 string을 추가하도록 했다.

 

이것을 다음과 같이 수정했다.

 

import { useReducer } from "react";

const reducer = (state, action) => {
  console.log(state);
  console.log(state.count);

  switch (action.type) {
    case 1:
      return {
        count: state.count + 1,
        history: state.history + " + 1",
      };
    case 10:
      return {
        count: state.count + 10,
        history: state.history + " + 10",
      };
    case 100:
      return {
        count: state.count + 100,
        history: state.history + " + 100",
      };
    case 200:
      return {
        count: state.count + 200,
        history: state.history + " + 200",
      };
    case 300:
      return {
        count: state.count + 300,
        history: state.history + " + 300",
      };
    case 500:
      return {
        count: state.count + 500,
        history: state.history + " + 500",
      };
    default:
      return {
        ...state,
      };
  }
};

const initialState = {
  count: 1,
  history: "1",
};

const Count = () => {
  const [data, dispatch] = useReducer(reducer, initialState);
  const { count, history } = data;
  return (
    <div>
      history : {history}
      <br />
      {count}
      <br />
      <button onClick={() => dispatch({ type: 1 })}>add 1 :</button>
      <button onClick={() => dispatch({ type: 10 })}>add 10 :</button>
      <button onClick={() => dispatch({ type: 100 })}>add 100 :</button>
      <button onClick={() => dispatch({ type: 200 })}>add 200 :</button>
      <button onClick={() => dispatch({ type: 300 })}>add 300 :</button>
      <button onClick={() => dispatch({ type: 500 })}>add 500 :</button>
    </div>
  );
};

export default Count;

 

이제 우리는 일일이 함수를 만드는 것이 아닌 한곳에서 reducer를 활용해서 원하는 작업을 제어할 수 있게 되었다.

 

적용된 화면은 다음과 같다.

 

2. React Router 사용하기

Routing란 무엇인가?

먼저 Routing 이라는 개념에 대해 알아보자.

 

 

라우터란 데이터의 경로를 실시간으로 지정해주는 역할을 하는 것이다.

 

라우팅이란 경로를 정해주는 행위 자체와 그런 과정들을 포함하여 일컫는 말이다. 

 

그렇다면 페이징 라우팅이란 무엇인가? 우리가 url 주소로 입력한 것을 찾아서 알맞은 페이지를 선택하고 페이지에 사용자가 접속하는 과정을 페이지 라우팅이라고 한다. 

 

Reac는 단일 페이지 어플리케이션이자 Client Side Rendering을 이용한다.

 

Single Page Application(줄여서 SPA)인 React는 기존의 Multi Page Application(줄여서 MPA)와 달리 index.html만 화면에 보여준다. 

 

즉, 다른 url을 입력해도 index.html만 뿌려준다는 것이다. 

 

이러한 비슷한 기능을 위해서 우리는 React Router를 이용할 것이다.

'

실제로 전체 page 를 이동하는 것이 아니라, 입력한 url에 따라서 page를 update하는 것이다. 

React Router란 무엇인가?

React Router는 SPA 도 url 주소에 따라서 화면을 update할 수 있도록 지원해주는 라이브러리다.

 

https://reactrouter.com/

 

 

이제 tutorial을 통해 한 번 차근 차근 배워보도록 하겠다.

React Routert 사용하기

새로운 react boilder plate 를 다운받았다.

 

다음 명령어를 수행하면 된다. 

 

npx create-react-app react-router-practice
npm i react-router-dom@6

 

빠른 이해를 위해 바로 코드를 보겠다.

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Nav from "./Nav";
import Router1 from "./Router1";
import Router2 from "./Router2";
export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Nav />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/router1" element={<Router1 />} />
          <Route path="/router2" element={<Router2 />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

BrowserRouter의 역할

<BrowserRouter>는 웹 브라우저에서 React Router를 동작시키기 위해 추천되는 interface입니다!
<BrowserRouter>는 clean URL들을 사용해서 브라우저의 주소 바의 현재 위치를 저장하고 브라우저에 저장된 history stack을 안내합니다.
출처 : https://reactrouter.com/docs/en/v6/routers/browser-router

=> <BrouserRouter> 를 사용하면 우리가 설정한  URL이 저장되고 접근할 수 있게 된다는 말로 이해된다.

Routes의 역할

<Routes>와 <Route>는 현재 location를 기준으로 React Router에 어떤것을 rendering하기 위한 주된 방법이다. 
<Route>를 if 로 생각할 수 있다. if처럼 특정 url이 맞다면 <Route>에 설정된 element를 rendering하는 것이다. 
츨처 : 
https://reactrouter.com/docs/en/v6/components/routes

=> <Route> 를 사용하면 우리가 설정한  URL이 클릭된다면 ( 이것을 if로 설명했다) 그 path에 해당되는 element를 rendering해준다고 이해된다.

location이 변할 때 마다 <Routes>는 모든 자식 <Route> 원소들을 보고 맞는 것을 매치시켜준다. 그리고 UI에 rendering해준다. <Route> element는 내포된 UI를 나타낸다. 또한 내포된 URL 경로에 응답한다. 

=> <Routes>는 자식들인 <Route>들이 잘 매치되도록 도와준다고 이해된다.

그리고 Nav.js안에 Link를 추가해보도록 하겠다.

import { Link } from "react-router-dom";
const Nav = () => {
  return (
    <>
      <ul>
        <li>
          <Link to={"/"}>Home</Link>
        </li>
        <li>
          <Link to={"/router1"}>Router1</Link>
        </li>
        <li>
          <Link to={"/router2"}>Router2</Link>
        </li>
      </ul>
    </>
  );
};

export default Nav;

Link component의 역할

<Link>는 사용자가 클릭하거나 tapping함으로써 다른 페이지로 가도록 도와주는 element다. 
react-router-dom에서 <Link>는 리소스를 가르키는 실제 href 를 가진 접근 가능한 <a> element를 render한다. 
<Link>는 우리가 생각하듯이 작동한다. 

 

화면은 다음과 같다. 

링크를 클릭시에 내부의 내용도 변하는것을 확인할 수 있다.

 

이번 시간에는 React Router에 대해 공부했고 몇가지 기능을 알아보았다.

 

솔직히 내가 사용하고 싶은 것에는 이정도만 해도 될 것 같긴 하다. 

 

그래도 React Router 기능이 엄청 많은데 이대로 그냥 가기는 좀 그렇다. 

 

그래서 다음시간에는 React Router 기능에 대해 좀 더 알아보려고 한다.

 

 

'programming language > react' 카테고리의 다른 글

[React] CSR vs SSR / Gatsby, Next.js  (0) 2022.06.14
[React] React Router 파해치기  (0) 2022.06.12
[React] React.memo, useCallback사용하기  (0) 2022.06.11
[React] React Hook - useContext, useRef, useMemo 적용하기  (0) 2022.06.10
[React] Props와 State 이해하기 / Hook(useState, useEffect) 적용  (0) 2022.06.07

'programming language/react'의 다른글

  • 현재글[React] useReducer / React Router 사용하기

관련글

티스토리툴바