React Redux

Redux : 상태관리 라이브러리, 중앙 Data 관리소, 중간 컴포넌트를 거칠 필요 없음 중앙화된, 중앙state 관리소, 패키지, Global state를 관리

프롭스 드릴링 부모 > 자식 순으로 순차적으로 프롭스를 내려주는 방법만 있음 State를 보내기 위해서는 반드시 부모-자식 관계가 되야함

Loacal state Global state 구분 필요

1. yarn add redux react-redux 명령어로 패키지 설치 package.json에서 정상 설치 확인

2. src 하위로 redux 폴더 생성
3. redux 하위로 config 폴더 생성, redux 하위로 modules 폴더 생성
4. config 하위로 configStore.js 파일 생성

redux : 리덕스 관련 코드를 모두 몰아넣음 config : 리덕스 설정 관련 파일 전부 configStore : 중앙 state 관리소 > 설정코드(.js) modules : 중앙 state 관리소의 관리하는 state의 그룹

이해하기가 어렵다면 과감하게 받아들이자 방법만 익히기

1. configStoer.js 파일에 import createStore, combineReducer(리듀서들을 묶다)

2. 아래 코드를 입력해 스토어를 생성하고 모든 컴포넌트들은 props로 값을 내려주지 않아도 이 중앙 데이터 관리소로 데이터를 바라볼 수 있게 된다.

import { createStore } from "react-redux";
import { combineReducers } from "redux";

const rootReducer = combineReducer({});
// 리듀서들을 하나로 모아서 한 개로 만들어 놓은 기본 리듀서
// modules에 모아놓은 State들을 객체형태로 인자로 넣음
const store = createStore(rootReducer);
// createStore Api를 사용해 스토어를 생성함
// 인자로 Reducer들의 묶음이 들어가야 함 즉, rootReducer

export default store;
// 만든 store를 밖으로 내보냄

1. index.js로 이동 후 render 하위에 아래 코드 처럼 수정함

import store from "./redux/config/configStore";
// configStore에서 가져와야함
// export default로 내보냈기에 중괄호 필요없음

<Provider store={store}>
  <App />
</Provider>;
// App 컴포넌트가 Provider(store)의 지배권으로 들어감
// App 컴포넌트 하부 전체에서 store를 사용 가능하다.

1. modules 하위로 사용할 State의 그룹 파일을 생성함(ex > counter.js) 초기 상태값이 필요함 ‘initialState’가 보편적임 그 아래 Reducer(함수) 생성 input 값(인자)로 state와 action을 받음

const initialState = {
  number: 0,
};

const counter = (state = initialState, action) => {
  // action은 객체 형태로 들어옴, action의 type과 value를 가지고 있음
  // action : state를 어떻게 수정할 것인지 표현하는 객체
  switch (action.type) {
    // action에 있는 type에 따라서 어떤 작업을 수행할 것이다.
    default:
      return state;
  }
};

export default counter;

1. modules 폴더에 만든 리듀서를 configStore.js 파일에 import 하고 rootReducer에 key:value 페어로 인자로 넣어준다.

2. redux의 훅을 사용하여, store에서 state를 가져온다

import "./App.css";
import { useSelector } from "react-redux";

function App() {
  const counter = useSelector((state) => {
    // store 안에 있는 state 전체를 뜻함
    return state.counter;
  });
  console.log("counter", counter.number);
  // 매개변수로 콜백함수 들어옴
  return <div>Redux</div>;
}

export default App;

1. Dispatch는 action 객체를 가지고 store에 던져주는 놈이다. UI에서 발생한 action을 store에 요청, 보내주는 놈이다.

action { type: payload: } action 객체는 항상 해당 형태를 가진다

store는 action 객체에 있는 type에 따라 state를 변경해주는 작업을 한다.

Reducer와 컴포넌트의 호출부 이름을 항상 맞춰줘야 한다.

action crearter, action value 휴먼 에러를 방지하기 위해

action value를 변수화 하고 action 객체는 action type을 payload 만큼 처리하는 것이다. ex : payload 가 3일 경우 3만큼을 type 해라

action value를 반환하는 함수 action creater를 사용하며, 하드코딩을 지양해야함

상위 컴포넌트에 모듈 하위 컴포넌트에 뷰 code sand

기능, 뷰, 스타일 다 분리

스토어에서 값을 가져오는 흐름, 이미 변경된 값을 어떻게 가져오는가?

메인코어 라우터, 패키지 설치 등 대략의 폴더 구조(개인) 페이지 단위로 분리(개인) 기능 단위