redux3...

redux : 리덕스와 관련된 코드를 모아놓을 폴더 config : 리덕스 설정과 관련된 파일들을 놓을 폴더 configStore : '중앙 State 관리소'인 Store을 만드는 설정 코드들이 있는 파일 modules : 우리가 만들 State들의 그룹이다. 예를들어 투두리스트를 만들면 투두리스트에 필요한 State들이 모두 모여있을 todos.js를 생성하는데, 이 todos.js파일이 곧 하나의 모듈이 된다.

// src/modules/counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

 

초기상태값 === initialState

우리가 State를 선언할 때 useState(~~) 괄호 안에 넣었던 초기값과 같은 것.

객체가 아니어도되고, 배열이어도 됨, 원시데이터여도됨. 객체에도 여러개의 변수를 넣어줄 수 있음

// 초기값이 0
const initialState = 0;

// 초기값이 0이 있는 배열 
const initialState = [0];

// 초기값이 number = 0, name = '석구'인 객체
const initialState = {
	number: 0,
	name: '석구'
};

 

리듀서 === Reducer

리듀서는 변화를 일으키는 함수이다.

useState()를 사용할 때 num값을 변경하려면 setNum을 사용했다.

const onClickHandler = () => {
	setNumber(number + 1); // setState를 이용해서 state 변경
}

이런 것처럼 리덕스에서는 이 역할을 리듀서가 한다.

 

우리가 리듀서야 number에 +1을 해줘 라고 명령하면 리듀서는 number에 +1을 더해줍니다.

그래서 변화를 일으키는 함수라고 표현합니다.

// src/redux/modules/counter.js


// counter 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter; // 여기

리듀서의 인자에 state = initialState, action이라고 되어있습니다.

리듀서 인자 첫자리에 state를 두번쨰 자리에 action을 꺼내 사용 할 수 있습니다.

이게 지금 뭔지는 몰라도 되는데, 첫자리에 state = initialState처럼 state에 initialState를 할당해야하는건 꼭 기억합니다.

 

지금까지 모듈파일에서 초기상태값과 리듀서를 작성했습니다.

이제 모듈을 스토어에 연결합니다 아직까지 모듈과 스토어가 분리되어있는 상태이기 때문에 아직 State를 스토어에서 꺼낼 수 없습니다.

// src/redux/modules/config/configStore.js

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});

이렇게 위에서 정의한 counter을 스토어에 넣어줍니다. 이러면 스토어와 모듈이 연결됩니다.

이렇게 스토어와 모듈을 연결시키는 코드는 모듈을 추가할 때마다 똑같이 진행하면 됩니다.

 

우리가 생성한 모듈이 스토어에 연결됐는지 확인하는 방법은 컴포넌트에서 스토어를 직접 조회하면 됩니다.

컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector이라는 react-redux의 훅을 사용해야합니다.

 

useSelector의 사용법은 아래와 같습니다.

// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number = 

// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다. 
// 우리가 useSelector를 처음 사용해보는 것이니, state가 어떤 것인지 콘솔로 확인해볼까요?
const number = useSelector((state) => {
	console.log(state)
	return state
});

 

App.js에서 useSelector을 사용해 조회를 해봅시다.

// src/App.js

import React from "react";
import { useSelector } from "react-redux"; // import 해주세요.

const App = () => {
  const counterStore = useSelector((state) => state);	
  const number = useSelector((state) => state.counter.number);
  console.log(counterStore);
  console.log(number);

  return <div></div>;
}

export default App;

 

★★★★★이렇게 컴포넌트에서 스토어를 조회할 때 useSelector훅을 사용합니다.★★★★★

위에서 화살표함수에서 꺼낸 state라는 인자는 현재 프로젝트에 존재하는 모든 리덕스 모듈의 state입니다.

 

이 state에서 number에 접근하고 싶다면 위 코드처럼 변수를 설정하고 useState(state.counter.number)하면 됩니다!!