[TIL] 230621

Redux

상태 관리 라이브러리
yarn add redux react-redux 로 설치
Store는 Reducer + State -> UI(컴포넌트) -> Dispatch(action을 가지고) -> Store에 보낸다.

• state
  초기 상태값
• Reducer
  함수

1) useSelector
컴포넌트에서 저장관리소를 조회

const 변수 = useSelector((매개변수) ->{ 매개변수.원하는값 });

2) useDispatch

dispatch + payload

예를 들어, 버튼을 누르면 +1이 되는 counter가 있을 때 원래는 setState를 사용했지만 dispatch를 통해 action객체를 만들어 보내주어야 한다.

• 리팩토링
  세분화된 네이밍 사용하기
  모듈명/타입
  → reducer랑 호출하는 부분이랑 이름이 같아야 한다. → 하드코딩 지양
  

• action creator, value
  counter.js
  action value : 문자열의 경우 변수로 관리해서 코딩해준다.
  action creator : 객체를 만들어서 반환해준다.
  컴포넌트에서 사용하기 위해 각각 export 해주어야 한다.

• payload
  전달되는 실체

  예제
  input에 값을 입력하면 그만큼 payload해주게 만들기

Redux Ducks Pattern

어떤 사람이 만들어둔 패턴
1. Reducer 함수를 export default
2. Action creator 함수들을 export
3. Action type은 app/reducer/ACTION_TYPE

React Router Dom

url 슬래시(/) 뒤에 있는 페이지들을 사용하기 편하게 만들어준다.
yarn add react-router-dom 으로 설치

src -> pages -> 페이지 컴포넌트들 
	  -> shared -> Router.js

import { BrowserRouter, Route, Routes } from "react-router-dom";

const Router = () =>{
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="/works" element={<Works />} />
            </Routes>
        </BrowserRouter>
    )
};

export default Router;

=> 메인에서 본인이 만든 Router를 import하여 사용하면 된다.

• useNavigate
  a태그와 유사하고 다른 페이지로 이동하고 싶을 때 사용하면 된다.

const navigate = useNavigate();
<button 
        onClick={() => {
             navigate("/");
        }}>Home으로 이동</button>

• Link
  a태그는 사용하면 새로고침 되는데 redux, useState 초기화를 방지하기 위해서 해당 API를 사용한다.

<Link to={'/contact'}>contact 페이지로 이동하기</Link>

• useParams
  url의 파라미터 값을 가져와서 사용할 수 있다.

심화과정 과제 lv2

처음부터 다시 만들어보면서 복습하고 컴포넌트를 객체지향적으로 만들 수 있게 나눠보려고 한다.

• uuid
  yarn add react-uuid로 설치
  id에 고유한 값을 사용하기 위해 사용한다.