soju 스터디 8주차

기존 prop 방식의 문제점

컴포넌트와 컴포넌트 간 값을 교환하고 싶을 때 보통 prop을 사용한다. 가장 바깥쪽 부모로부터 내가 원하는 자식 컴포넌트까지 prop을 통해 값을 전달하다 보면 중간 단계 컴포넌트는 단순 값 전달만 하는 역할을 하게 되는 경우가 있다. 또한 출발 컴포넌트와 도착 컴포넌트 사이 중첩된 컴포넌트가 많은 경우 해당 prop을 전달하는 것은 비효율적일 수밖에 없다.

Redux란

npm install redux react-redux 명령어를 통해 설치가 가능한 라이브러리다. 마치 블루투스처럼 데이터를 원격 저장소에 넣어두고 원하는 컴포넌트가 해당 데이터를 그때그때 갖다 사용할 수 있다! 데이터의 불변성을 유지하기 위해 state를 사용하듯 예전 데이터를 복제하여 사용하도록 한다.

import {createStore} from 'redux';
import {Provider, useSelector, useDispatch, connect } from 'react-redux';

function reducer(currentState, action) {
  // default 값 설정
  if(currentState === undefined) {
    return {
      number:1,
    }
  }
  const newState = { ...currentState };
  return newState;
}

const store = createStore(reducer);
<Provider store={store}>
</Provider>

const dispatch = useDispatch();

store, action, reducer란?

• store : 상태가 관리되는 하나의 공간
• action : App에서 store에 운반할 데이터
• reducer : action을 store에 바로 전달하지 않고, reducer에 전달해서 간접적으로 업데이트하는 역할