React Hooks, Routers // 20210308

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

1. React Hooks

• 함수형 컴포넌트에서도 상태관리(state, LifeCycle)를 할 수 있는 다양한 기능 제공
• 내가 느끼기에는 내장 메소드와 비슷한 느낌인듯..
• 사실 이 얘기를 듣기 전까지는 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 잘 몰랐음.
• 잘 정리된 글이 있으니 참고! https://velog.io/@sdc337dc/0.%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

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에 따라 화면 표시
   • Link와 Route 대신 switch를 활용하는 이유
     https://baeharam.netlify.app/posts/react/why-switch-is-needed

3. 결론

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