[TIL] Day52 #Redux

2022.07.07(Thurs)

[TIL] Day52
[SEB FE] Day51

☑️ Redux 종합 Quiz

✍️ Redux 종합퀴즈를 풀고 기억해야 할 개념을 정리합니다.

⌘ 상태 관리 라이브러리 종류: React Context, Redux, MobX, recoil, zustand …

⌘ Reducer는 이전 상태와 동작을 받아 새 상태를 리턴하는 순수 함수

⌘ Action 객체의 값을 확인한 후, 해당되는 경우가 없을 땐 기존 상태를 그대로 리턴하는 것이 Good 🙆‍♀️

⌘ Redux의 Store 설정 방법

//index.js
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { reducer } from './reducer.js';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

⌘ 만약 여러 개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용해서 하나의 Reducer로 합체 가능

// Case: App.js에서 reduce1에서 생성된 데이터 사용

//reducer.js
import { combineReducers } from 'redux';

const reducer1 = (initialState = [1, 2, 3], action) => {
	...
};

const reducer2 = (initialState = {}, action) => {
	...
};

// combineReducers()로 reducer1, reducer2를 하나의 reducer로 합체
export const rootReducer = combineReducers({ reducer1, reducer2 });

// -------------------------------------------------------------

//index.js
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { rootReducer } from './reducer.js';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// -------------------------------------------------------------

//App.js
import React from 'react';
import styled from 'styled-components';
import { useSelector } from 'react-redux';

...

export default function App() {
	// reducer2 데이터를 불러오고 싶다면 reducer1 -> reducer2로 변경하면 됨!
  const data = useSelector((state) => state.reducer1);
  console.log(data); // [1, 2, 3]
  return (
    ...
  );
}

⌘ Reducer가 처음 호출될 때, state값은 undefined
👉 따라서 state의 초깃값을 지정해서 Action 발생 전에 처리해줘야 함
If not 초기값 설정 → 오류 발생

//reducer.js
// 1)
export const reducer = (initialState, action) => {
	if (typeof initialState === undefined) {
      initialState = 1;
    }
	...
};

// 2)
export const reducer = (initialState = 1, action) => {
	...
};

---

✚ [Github]

2개의 repository를 하나의 repository로 합치기

전에 구현한 CRUD-diary-toy_project를 계속 refactoring하면서 계속 update 해나가고 싶어서 각각의 client, server repository를 하나의 repository로 합치고 싶어서 방법을 찾아보고 적용해봤다!

1. 합쳐서 새롭게 관리할 repository를 새로 생성한 후, Local에서 clone 받기
git clone https://github.com/Beanxx/React-Express-CRUD-Project.git

2. 새로 생성한 폴더에서 subtree를 이용해 새로운 repository에 추가할 기존 repository를 더해줌
git subtree add --prefix=[새 repositry에 추가할 폴더명] [추가할 기존 git repository 주소] [기존 repository branch name]

3. 새로운 repository에 push
git push

---

오늘은 어제 Redux 과제가 생각보다 일찍 끝난 덕에 여유롭게 공부할 수 있는 날 ٩( ᐛ )و
어제 너무 피곤해서 원래 자던 시간보다 일찍 잤는데도 오전에 넘 피곤했다..
오늘은 저녁 약속도 없으니까 진짜진짜 계속 미루지 말고 계획했던 강의도 다 듣자 젭알 🙏

✍️ Todo List
☑️ TIL 작성
☑️ 프로그래머스 Lv.1_정수 제곱근 판별 문제 풀기
☑️ 인프런 리액트 강의(Node.js, React.js 기초 파트)듣기
☑️ Udemy React Section3 강의 듣기
☑️ Udemy 알고리즘 강의 듣기
☑️ DeepDive 책 1~3장 읽기(~p.33)