🤷🏻‍♀️ Redux?

리덕스를 한번 정리한 적이 있는 팀프로젝트를 준비하면서
다시한번 더 꼼꼼히 개념 정리를 하기위해 알아보자 ♪( 'ω' و(و"

Redux를 쓰는 이유
1. props 문법 귀찮을 때
2. state 변경 관리 할 때

redux를 설치하면 state를 보관하는 보관함을 만들 수 있는 거임

Reducer
상태관리를 담당하는 Hook
useState를 통한 상태 관리 및 데이터 추가 / 제거 / 수정 등의 각종 Handler를 하나의 함수로 사용할 수 있도록 해줌

const [state, dispatch] = useReducer(리듀서 이름, 초기 데이터)

export function userReducer(state, action){
	switch (action.type){
    	case 'ADD':
        	return [...state, action.data]
        case 'REMOVE':
        	return ~~~
        default:
        	throw new Error(`Unhandled action type : ${action.type}`)
    }
}
//state는 말그대로 현재 상태값,
//action은 dispatch 함수 실행 시 인자로 넣어준 그 값을 말합니다
//그래서 type:ADD라고 인자에 명시하면 action.type을 통해서 그 값을 가져올 수 있게 됨
//dispatch({type: 'ADD'}) -> action = {type: 'ADD'}

컴포넌트에서 state 수정요청하려면? dispatch 쓰면됨

설치방법
yarn add redux react-redux

세팅방법
import {Provider} from 'react-redux';
<Provider> </Provider>원하는 곳 감싸기
감싸진 부분은 props없이도 state 공유가능
import {createStore} from 'redux';
let store = createStore(()=>{return [{id:0, name:'멋진신발', quan:2}]});

• 컴포넌트에서 store에 있는 state쓰려면

import {connect} from 'react-redux';

1. function만들기

function 함수명(state){ //state를 props화시킴
  return {
    state : state
  }
}

2. export default connect()()

export default connect(함수명)(App)

3. store 데이터를 props로 등록하기

function App (props) {
  return (
    <div>
      <div>{props.state[0].name}</div>
    </div>
  );
};