React Hooks, Routers // 20210308

프로젝트 진행 중에 리액트를 공부하면서 개념적인 부분들 정리

1. React Hooks

1) useState

  • 가장 기본 Hook. 함수형 컴포넌트에서도 state를 활용할 수 있게 해줌.
  • 비구조화 할당 문법 사용됨.
  • 사용법 예제
import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);// useState
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};
  • 이외에도 useEffect, useContext, useReducer, useMemo, useCallback, useRef, useInputs, usePromise 등 다양한 hook이 있음.
  • 전부 외워두기 보단 필요할때 꺼내쓰는게 좋음
  • 다른 개발자들이 만든 커스텀 hook도 필요에 따라 꺼내 쓰기
    https://nikgraf.github.io/react-hooks/

결론
함수형 컴포넌트로 개발할 경우 hook은 필수로 사용해야함.
상태관리 및 유용한 기능을 사용하기 위해서 익혀두어야 하며 여러가지 hook들을 필요에 따라 가져다 쓰는 습관을 가져야겠다.

2. Routers

1) 라우터(router)란?

  • spa(Single Page Application) 개발 방식에서, 한 페이지에서 다른 페이지를 렌더링하는 방식.
  • mpa(multi? ple? Page Application) 개발방식의 경우 여러 HTML 페이지를 갖추고 요청에 따라 다른 html 페이지를 전송했는데 spa방식은 한 html에서 .js의 DOM조작을 통해 각각의 페이지를 렌더링함.
  • 서버의 부담도 줄여주고 속도도 빠르다는 장점이 있으나 단점도 명확함.
    단점
  • 규모가 커질수록 파일이 커짐(코드 스플리팅으로 보완)
  • js를 실행하지 않는 일반 크롤러에서는 페이지 정보를 제대로 수집해가지 못함.
  • js 실행 전 아무런 페이지도 뜨지 않을 수 있음(서버 사이드 렌더링으로 보완)

2) 사용법

1. yarn add react-router-dom

  • 리액트 라우터 돔 라이브러리 설치

2. route 사용

  • 코드를 보고 이해하자
import React, { useState } from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom"; 
import Auth from "../components/routes/Auth";
import Home from "../components/routes/Home";

const AppRouter = () => {
    const [ isLoggedIn, setIsLoggedIn ] = useState(true); // 1
    return (
        <Router> // 2
          <Switch> // 3
            {isLoggedIn ? (
                <>
                  <Route exact path="/">
                      <Home />
                  </Route>
                </>
            ) : (
                  <Route exact path="/">
                      <Auth />
                  </Route>
            )}
          </Switch>
        </Router>
    );
};

export default AppRouter;
  1. useState hook 활용해 로그인에 따른 상태관리
  2. 로그인 상태에 따라 home 또는 auth로 라우팅한다.
  3. router의 switch를 활용해 exact path에 따라 화면 표시

3. 결론

  • 라우터는 리액트를 활용할 때 필수적인 요소임
  • 각 페이지로 연결해줄 때 기존 방식보다 가벼운 SPA방식으로 개발할 경우 반드시 숙달할 필요가 있다.
  • 내가 배운 방식은 src/components/routes 폴더에 각 페이지(예시에서는 Home.js, Auth.js)를 정리해놓고 해당 파일을 import( import home from "../src" 이런 식)해서 각 경로로 라우팅함.

좋은 웹페이지 즐겨찾기