Reactmemo, CustomHook, Redux

1. useCallback()으로 초기화를 한다.
2. 초기화로 예시사용

const initCount = useCallback(()=>{})

useMemo

: value를 캐싱한다.
무거운 컴포넌트나 데이터 값을 최초에 한번만 값을 가져오는 용도로 많이 사용
But, 하지만 남발해서 썼을 때는 데이터를 저장하기 위해 별도의 메모리 확보를 많이 해야하기 때문에 오히려 성능이 악화될 수 있다.
반드시 필요할 때만 사용할 것...!

import React from "react";
import { useMemo } from "react";
import { useState } from "react";

const HeavyComponent = () => {
  const [value, setValue] = useState(0);

  const heavyWork = () => {
    for (let i = 0; i < 100000; i++) {}
    return 100;
  };

  const sampleValue = useMemo(() => heavyWork(), []);
  return (
    <div>
      <button
        onClick={() => {
          setValue(value + 1);
        }}
      ></button>
    </div>
  );
};

export default HeavyComponent;

Custom-hooks

Custom-hook 을 만들 때 주의사항

1. custom hook의 함수 이름은 use로 시작하는 것이 좋다.
2. 파일이름은 원하는대로!

custom-hook 만드는 법

1. custom hook을 src폴더 아래에 hooks폴더를 만들고 hooks 폴더에 저장한다.

useInput.jsx

const useInput = () => {
  // value를 useState로 관리
  const [value, setValue] = useState("");
  // handler 로직
  const handler = (e) => {
    setValue(e.target.value);
  };
  return [value, handler];
};

export default useInput;

App.jsx

import React from "react";
import { useState } from "react";
import useInput from "./hooks/useInput";

// custom hook만들 때 주의사항
// 1. custom hook의 함수 이름은 use로 시작하는 것이 좋다. (useInput)
// 2. 파일 이름은 원하는대로(useInput)
const App = () => {
  const [title, onChangeTitleHandler] = useInput();
  const [body, onChangeBodyHandler] = useInput();

  return (
    <div>
      <input value={title} type="text" onChange={onChangeTitleHandler} />
      <input value={body} type="text" onChange={onChangeBodyHandler} />
    </div>
  );
};

export default App;

---

Redux란?

: 전역상태 라이브러리/ 중앙관리소를 사용하게 도와주는 패키지

Redux 가 필요한 이유

1-1. useState의 불편함

• useState는 props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 값을 보낸다. (prop-drilling)
• useState는 반드시 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내려고 할 때 부모 컴포넌트를 거쳐야한다.

Local state(지역상태) & Global state(전역상태)

1. Local state(지역상태)
   : 컴포넌트에서 useState를 이용해서 생성한 state이다.
2. Global state(전역상태)
   : 컴포넌트에서 생성 x 중앙화된 특별한 곳에서 state가 생성된다.

Context API와 비교해 Redux만이 가지는 이점

1. 성능 최적화
   Context api는 모든 컴포넌트를 리렌더링 상태가 변경될 떄마다 모든 컴포넌트가 불필요하게 업데이트 되는 것을 막기 위해 복잡한 최적화가 필요하나 Redux는 컴포넌트만 선택적으로 업데이트 할 수 있어 성능 관리가 용이하다.
2. 상태 로직의 중앙화와 일관성
   Redux는 애플리케이션의 상태를 하나의 저장소(store)에 저장
   더 일관성 있고 예측 가능한 상태 변경이 가능해짐, 로직이 리듀서(reducers)에 의해 처리되기 때문에 디버깅과 테스팅이 용이하다.
3. 강력한 미들웨어와 개발도구
   Redux는 다양한 미들웨어를 지원한다.

---

Redux 사용법

1. yarn add redux react-redux
2. src폴더 아래에 redux폴더 생성
3. redux폴더 내에 config, modules폴더 생성
   5, config폴더 내에 configStore.js생성
4. config 폴더에는 redux설정과 관련된 파일 configStore.js파일은 중앙스토어를 만드는 설정코드들을 놓을 곳 modules폴더에는 state들의 group을 묶어놓는 곳
5. main.jsx에서 Provider로 App.jsx를 감싸줘야 한다

configStore.js

import { combineReducers, createStore } from "redux";
// 1. rootReducer을 만든다.
const rootReducer = combineReducers({});
// 2. store을 조합
const store = createStore();
// 3,. 만든 store 내보내기
export default store;

main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { Provider } from "react-redux";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>
);

counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

//  리듀서(함수)
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      state;
  }
};
export default counter;

reducer : 변화를 일으키는 함수

---

Redux 흐름

1. View 에서 액션이 일어남
2. dispatch 에서 action 이 일어나게 된다.
3. action 에 의한 reducer 함수가 실행되기 전 middleware가 작동
4. middleware 에서 명령내린 일을 수행하고 난 뒤 reducer 함수를 수행한다.
5. reducer의 실행결과 store에 새로운 값을 저장한다.
6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.

• 액션객체란 반드시 type이란 key를 가져야 하는 객체이다. 또한 리듀서로 보낼 명령이다.
• 디스패치란, 액션객체를 리듀서로 보내는 :전달자 함수이다.
• 리듀서란, 디스패치를 통해 전달받은 액션객체를 검사하고 조건이 일치했을 때 새로운 상태값을 만들어내는 함수이다.
• 디스패치를 사용하기 위해서는 useDispatch()라는 훅을 이용해야 한다.
  dispatch함수에는 액션을 파라미터로 전달한다. dispatch(action)
• 액션객체 type의 value는 대문자로 작성한다.

---

Ducks 패턴

: Ducks패턴은 Redux 앱을 구성할 떄 사용하는 방법론 중 하나
분산되어 있던 액션타입, 액션생성자, 리듀서를 하나의 파일로 구성하는 방식
1. Reducer함수를 export default한다.
2. Action creator 함수들을 export
3. Action type 은 app/reducer/ACTION_TYPE 형태로 작성

---

Redux 사용법

1. Yarn add redux react-redux
2. Src 폴더 아래 redux 폴더 만들기
3. redux폴더 아래 config, modules 폴더 생성
4. Config 폴더 안 configStore.js 생성 modules 안에 모듈 파일 생성
5. const rootReducer = combineReducers({})
6. Const store = createStore(rootReducer)
7. main.jsx에 Provider로 store 작성연결
8. Action value, action creator만들어서 export, state init