React
React에서는 상태(state)와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠습니다.
그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았습니다.
Redux
Redux 스프린트에서는 컴포넌트와 상태(state)를 분리하는 패턴을 배웁니다.
상태 변경 로직을 컴포넌트로부터 분리하면,
표현에 집중한 보다 단순한 함수 컴포넌트로 만들 수 있게 될겁니다.
원리와 구조, 즉 설계를 알아가는데 포커스를 맞추어 보자.
Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리가 아닙니다.
Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리입니다.
자바스크립트 앱에서 예측 가능한 상태 관리를 해주는 컨테이너
Redux is a predictable state container for javascript application
Redux 세 가지 원칙
- Single source of truth <=Store
- State is read-only <=Action
- Changes are made with pure functions <=Reducer
Single souce of truth
동일한 데이터는 항상 같은 곳에서 가지고 온다.
데이터를 저장하는 Store라는 하나 뿐인 공간이 있다.
State is read-only
(React에서도 state를 변경하기 위해서는 setState 메소드를 사용해야만 변경이 가능했다)
Reduct에서는 Action이라는 객체를 통해서 state를 변경할 수 있다.
Changes are made with pure functions
Reducer와 연결되는 개념이다.
이 세 가지 개념이 앞으로 배울
==>Store,Action,Reducer와 연결된다.
Store
전역 상태가 관리되는 유일한 공간
(전역 상태 관리 객체)
Action
Store에게 어플리케이션 데이터를 운반하는 자바스크립트 객체
(Simple Javascript Object)
이 객체 안에 type을 비롯한 다양한 데이터들이 담긴다.
Store에 대한 유일한 정보 출처
Dispatch함수의 전달 인자로 Action 객체가 들어간다.
Reducer로 전달된다.
현재 state와 action을 이용해 new State를 만들어내서 새로운 store가 생긴다.
Store에 있는 state
예시
{ type: "ORDER",
drink: {
menu: "Americano",
size: "Grande",
iced: false,
}
}Reducer
현재 state(상태)와 Action 객체를 파라미터로 받아와서 new State를 반환하는 함수
Reducer는 순수함수로 만들어져야 한다.
Action을 통해서 앱의 데이터를 Store에 운반하는 과정에서 Reducer를 거쳐서 가야 한다.
Store에는 현재 state가 있다.
현재 state와 action을 이용해서 새로운 new state를 만들어낼 수 있다.
문장 암기
Action 객체는Dispatch에게 전달되고,
Dispatch는Reducer를 호출해서 새로운new state를 생성한다.
이 문장은 공식같은 것이기 때문에 직접 코드를 쳐봐야 이해가 된다.
Redux Overview
브라우저에서 +버튼을 클릭하는 이벤트가 발생하면
Dispatch의 전달인자로 action 객체를 담아서 Reducer로 전달된다.
이 Reducer는 type을 바탕으로 action 객체의 type에 따라 다른 동작을 수행한다.
그 동작의 수행 결과로 New State가 반환된다.
그 store가 UI에 반영이 된다.
Redux에서 이 개념들을 connect할 수 있는 방법은 두 가지가 있다.
(1) map state props (2) Redux hooks
hooks가 좀 더 직관적이고, 최근에 나온 방법이다.
Redux 장점
- 상태를 예측 가능하게 만들어준다.
- 유지보수
- 디버깅에 유리하다(action과 state log 기록 시)
- 테스트를 붙이기 쉽다.
상태를 예측 가능하게 만들어준다.
Redux가 순수함수이기 때문에 다음 상태가 어떻게 될 지 쉽게 예측할 수 있다.
유지보수
복잡한 컴포넌트에서 앱에 props를 내리는 방식으로 작성했다면, 만약 버그가 나타났을 때, 그 props를 내려준 모든 컴포넌트를 수정할 필요가 없다.
디버깅에 유리하다(action과 state log 기록 시)
action과 state에 log 기록 시 action이 생겼을 때 어떤 일이 일어나는지 추적할 수 있다.
Redux Devtool을 이용해서 직접 확인할 수 있다.
테스트를 붙이기 쉽다.
presentational Component
받아온 props을 가지고 어떻게 보여지는가(view)만 신경씀(렌더링)
container Component
어떻게 동작하느냐에 대해 담당하는 컴포넌트(뿌려줌)
component -> presentatioinal component
pages -> container component
Redux hooks(useSelector, useDispatch)를 사용해 Store를 업데이트할 수 있다.
Redux 실습
const {createStore} = require("redux")
//state
const initState = {
name: "임정명",
posts: []
};
//action
// 유저네임 변경하기, post 추가하기{/*대문자는 convention*/}
const changeUsername = (name) => {
return {
type: "CHANGE_NAME",
name
}
}
const addPost = (post) => {
return {
type:"ADD_POST",
post
}
}
//reducer
const reducer = (prevState, action) => {
switch(action.type){
case 'CHANGE_NAME':
return {
...prevState,
name: action.name
}
case 'ADD_POST':
return {
...prevState,
posts: [...prevState.posts, action.post]
}
default:
return prevState;
}
}
//store
const store = createStore(reducer, initState);
console.log(store.getState());// store의 상태를 console.log로 볼 수 있다.
store.dispatch(changeUsername("강주현"))
console.log(store.getState());
store.dispatch(addPost("1"));
store.dispatch(addPost("앗..."));
console.log(store.getState());
store.dispatch(changeUsername("김세윤"))
console.log(store.getState());질문
return Object.assign({}, state, {
// cartItems: [...state.cartItems.filter((el) => el.itemId !== action.payload.itemId),action.payload]
cartItems: [...state.cartItems.slice(0, idx), action.payload, ...state.cartItems.slice(idx+1)]
})코드를 입력하세요왜 아래껀 되고, 위에건 안 되는지 물어보기
