TIL - 12/27

Udemy [리액트 완벽 가이드]
#244 ~ #246

---

[store > index.js]

import { createStore } from "redux";

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }
  return state;
};

const store = createStore(counterReducer);
export default store;

• 리액트 앱과 리덕스 스토어와 연결 -> 앱의 컴포넌트가 액션 발송하고 들을 수 있도록
• 하나뿐인 스통러르 제공하면 되는데, 여기서 제공이란 무엇일까?

---

[src > index.js]

import { Provider } from 'react-redux';
import store from './store/index';

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

• 다양한 컴포넌트 / 앱 전체에서 스토어에 접근해야 한다면 최상위에서 Provider 로 감싸주어야 한다
• 감싸주기만 한다고 어떤 스토어에 접근할 수 있는지를 알려주는 것이 아니다 -> 하나의 저장소만 있지만 다른 파일에 저장되어 있기 때문에 import 해와야 한다
• 모든 컴포넌트들이 저장소에 접근할 수 있게 되며 데이터 받기 / 구독 설정 / 액션 발송도 가능하다!

---

[components > counter.js]
counter 값을 출력하기 위해 리덕스 저장소와 그 안에 있는 데이터에 접근해야 한다

import { useSelector } from 'react-redux';

const Counter = () => {
	const counter = useSelector(state => state.counter);
    
    return (
    	<div>{counter}</div>
        );
}

*useSelector

1. 저장소가 관리하는 상태부분을 우리가 자동으로 선택할 수 있다 ( 상태 객체 전체에서 일부분만 쉽게 떼어내기 편함)
2. 사용할 때 react-redux가 해당 컴포넌트를 위해 리덕스 저장소에 자동 구독 설정해준다 (저장소 데이터가 변경될 때마다 업데이트 -> 최신 데이터를 받는다)

*클래스 기반 컴포넌트 -> connect 사용

• useSelector에 함수 넘겨줘야 한다 -> 그 함수는 react-redux 가 실행 -> 실행될 때 리덕스 상태, 관리된 데이터를 함수에 넣고 필요한 상태 부분을 받게 된다
• 우리가 저장소에서 추출할 어떤 데이터인지를 결정할 것이다