React Hooks, Routers // 20210308
6704 단어 hooksRoutersReactToyprojectReact
프로젝트 진행 중에 리액트를 공부하면서 개념적인 부분들 정리
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;
- useState hook 활용해 로그인에 따른 상태관리
- 로그인 상태에 따라 home 또는 auth로 라우팅한다.
- router의 switch를 활용해 exact path에 따라 화면 표시
- Link와 Route 대신 switch를 활용하는 이유
https://baeharam.netlify.app/posts/react/why-switch-is-needed
- Link와 Route 대신 switch를 활용하는 이유
3. 결론
- 라우터는 리액트를 활용할 때 필수적인 요소임
- 각 페이지로 연결해줄 때 기존 방식보다 가벼운 SPA방식으로 개발할 경우 반드시 숙달할 필요가 있다.
- 내가 배운 방식은 src/components/routes 폴더에 각 페이지(예시에서는 Home.js, Auth.js)를 정리해놓고 해당 파일을 import( import home from "../src" 이런 식)해서 각 경로로 라우팅함.
Author And Source
이 문제에 관하여(React Hooks, Routers // 20210308), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@skwlalsl93/React-Hooks-Routers-20210308저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)