오늘 한 일
- [내배캠] React 숙련 강의 듣기
- [개인Project] 팬레터함 만들기
학습 내용
Redux 흐름
(1) dispatch가 action을 store에 던진다!
(2) store는 action 객체에 있는 type에 따라 state를 변경해준다.
Redux 카운터 프로그램 만들기
1. 초기 설정
// src/redux/modules/counter.js
// (1) 초기 상태값
const initialState = {
number: 0,
};
// (2) 리듀서
const counter = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};
// 모듈파일에서는 리듀서를 export default 한다.
export default counter;(1) 초기 상태값 : initialState
state의 초기값은 {} 객체이고, 그 안에 number라는 변수에 초기값 0을 할당해 준 것
// 초기값이 0
const initialState = 0;
// 초기값이 0이 있는 배열
const initialState = [0];
// 초기값이 객체
const initialState = {
number: 0,
name: '석구'
};(2) 리듀서 : state에 변화를 일으키는 함수
state를action의type에 따라 변경하는 함수이다.state와action을 인자로 받는다.
- state : 상태
- action : key-value pair ⇒type과payload를 key로 가지고 있다. state를 어떻게 수정할 것인지에 대한 것
(3) 카운터 모듈을 스토어에 연결
counter 모듈을 import하고, 리듀서 삽입
// src/redux/config/configStore.js
// 원래 있던 코드
import { createStore } from "redux";
import { combineReducers } from "redux";
// 추가할 코드
import counter from "../modules/counter";
const rootReducer = combineReducers({
counter: counter, // <-- 새롭게 추가한 부분(리듀서): key-value 페어, 같으면 생략
});
const store = createStore(rootReducer);
export default store;(4) useSelector() : 컴포넌트에서 스토어에 접근하여 리듀스 값 읽어오기
스토어는 어떤 컴포넌트에서도 접근할 수 있다.
- 스토어에 있는 counter의 number에 접근하기
// src/App.js
import React from "react";
import { useSelector } from "react-redux";
const App = () => {
const counter = useSelector((state) => state.counter.number);
return <div></div>;
}
export default App;2. counter.js 모듈의 state 수정 (+1 기능 구현)
- 값의 수정은 리듀서에서 일어난다.
(1) 리듀서에게 보낼 명령 만들기
리듀서에게 내가 어떤 action을 하길 원한다고 명령(액션 객체)를 만든다.
액션 객체는 key-value pair로 이루어져 있으며, type과 payload라는 key를 가진다.
리듀서에서 action 객체의
type에 따른 변경 방법 정의하기
- 액션객체 type의 value는 대문자로 작성한다.
- “PLUS_ONE” 타입일 경우 +1을 더해준다.
// src/redux/modules/counter.js
const initialState = {
number: 0,
};
const counter = (state = initialState, action) => {
switch (action.type) {
case "PLUS_ONE":
return {
number: state.number + 1,
};
default:
return state;
}
};
export default counter;(2) 명령(액션 객체) 보내기
- dispatch 변수 생성
useDispatch(): dispatch(함수)를 통해 store에 던져주기
- dispatch 사용
dispatch({액션객체}): type, payload로 불러오기
// App.js
function App() {
const counter = useSelector((state) => {
return state.counter;
});
// dispatch 가져오기
const dispatch = useDispatch();
return (
<>
<div>현재 카운트 : {counter.number}</div>
<button
onClick={() => {
dispatch({
type: "PLUS_ONE",
});
}}
>
+
</button>
</>
);
}→ 마우스를 클릭했을 때 dispatch가 실행되고, () 안에 있는 액션 객체가 리듀서로 전달된다.
Redux 리팩토링
Action Creator, Action Values
우리가 만든 액션 객체의 value를 변경할 일이 생긴다면, 해당 액션 객체가 사용된 모든 부분을 하나 하나 변경해줘야 하는 번거로움이 있다. 이를 해결하기 위해 액션 객체를 한 곳에서 관리할 수 있도록 함수와 액션 value를 상수로 만들어서 사용할 수 있다.
Action Creator를 사용하는 이유
- 휴먼에러 방지 : value를 상수로 만들어서 자동완성 등의 보조 기능을 지원받을 수 있다.
- 유지보수의 효율성 증가 : value를 수정해야하는 상황에서, 한 번의 수정으로 가능하다.
- 코드의 가독성 : Action Creator가 한 곳에 정리되어 있어 모든 Action을 한 눈에 알 수 있다.
- 리덕스 공식 문서에서 권유하고 있는 방법
(1) 리듀서에서 Action Values, Action Creator 만들기
// src/modules/counter.js
// (1) 액션 value를 상수들로 만든다.
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";
// (2) Action Creator를 만들어 준다.
// plusOne()는 밖으로 나가서 사용될 예정이기 때문에 export 해준다.
export const plusOne = () => {
return {
type: PLUS_ONE,
};
};
export const minusOne = () => {
return {
type: MINUS_ONE,
};
};
// 초기 상태값
const initialState = {
number: 0,
};
// 리듀서
const counter = (state = initialState, action) => {
switch (action.type) {
case PLUS_ONE: // 위에서 선언한 상수를 넣어준다.
return {
number: state.number + 1,
};
case MINUS_ONE: // 위에서 선언한 상수를 넣어준다.
return {
number: state.number - 1,
};
default:
return state;
}
};
export default counter;(2) Action Creator 사용하기
- export된
Action Creator를 import 해준다. dispatch()안에 있던 액션 객체를 import한 Action Creator로 변경해준다.
// src/App.js
// 사용할 Action creator를 import 한다.
import { minusOne, plusOne } from "./redux/modules/counter";
const App = () => {
const dispatch = useDispatch();
const number = useSelector((state) => state.counter.number);
// dispatch의 액션 객체를 Action Creator로 변경한다.
return (
<div>
{number}
<button
onClick={() => {
dispatch(plusOne());
}}
>
+ 1
</button>
<button
onClick={() => {
dispatch(minusOne());
}}
>
- 1
</button>
</div>
);
};
export default App;Ducks 패턴이란?
리덕스의 구성요소를 패턴화하여 작성하는 것
Reducer 함수를
export default한다.Action creator 함수들을
export한다.Action type은
app/reducer/ACTION_TYPE형태로 작성한다.
오늘의 회고
-
개인 과제를 하는데, 강의 내용을 제대로 이해를 못해서 같은 강의를 여러 번 돌려봤다. 강의를 듣고 이해하는 것과 활용하는 것은 별개의 문제같다. 활용하는 것이 너무 어렵다.
-
알고리즘 문제를 푸는데, 점점 막히는 문제들이 많아지는 것 같다. 막히는 문제들을 그냥 pass하고 넘어가야 하는지... 적용해야 될 것 같은 메서드를 찾아보면서 문제를 푸는게 맞는지 아직 잘 모르겠다. 문제를 푸는 것 자체가 중요한 것이 아니고, 문제를 풀면서 배우는 것이 중요하니까 후자가 맞다고 판단했다. 문제가 막히면, 우선 사용할 메서드를 생각해내고, 적용이 힘들다면 메서드 사용법에 대해 공식문서를 다시 한 번 찾아보면서 사용법을 정리하면 공부가 많이 될 것 같다.
내일 할 일
- [개인Project] 팬레터함 만들기 기본 세팅 끝내기
