2021. 08.13(Fri.) <Redux의 기초>

따로 배울땐 몰랐어요...다 합쳐야 한다는 것

1. Redux?

• React에서 state를 사용할 때 상위에 있는 부모에서 자식으로 점점 state를 props로 전달하게 된다. 이때, 만약 컴포넌트가 너무 많아서 한 10개쯤 거쳐서 전달해야 한다면? 너무 복잡해서 고통스러울 것이다. 유지보수도 마찬가지이다.
• 이런 state를 어디서든 접근 가능한 하나의 저장소에 저장해서 어떤 컴포넌트에서든 접근할 수 있게 만든 것이다.
• 그 저장소는 꼭 지정된 함수를 이용해 수정할 수 있게 하면 state가 실수로 수정되는 경우도 없을 것이다. 마치 setState 함수처럼 말이다.

2. 생긴 모양을 구분해서 동작원리를 살펴보자.

• store : 우리가 만든 정보가 저장되는 공간.
  • state : 진짜 우리가 저장한 정보 (절때 직접 접근은 불가능)
  • reducer : state값을 바꿀 수 있는 함수.
  • dispatch : 2개의 값(지금 state와 action)을 reducer에 전달하고 subscribe를 호출해 준다.
    • action : UI에서 일어난 일들의 여러 가지 타입을 가진다. 이때 맞는 타입을 찾아 가공하고 가공한 데이터를 dispatch로 전달한다.
  • subscribe : reder함수를 '구독' 한다. state값이 바뀔 때마다, reder함수를 호출시켜준다. 
  • getState : render에서 UI정보를 받아서 state에 전달해 주며, 값이 다른 함수들에 의해 변경된 후에 다시 render로 바뀐 값들을 보내서 우리가 보는 화면을 만들어 준다. 즉, state에 접근할 수 있는 정상적인 방법이다.
• render : UI를 만들어주는 그 렌더되어서 우리가 직접 보는 코드. 

출처: https://www.youtube.com/watch?v=F_NLNBOqZrQ&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=5 (생활코딩 Redux-2.3)

3. Redux로 시간여행을 하자!

• Redux Devtools을 이용하면, 모든 state의 변경 상황을 다 알 수 있다. git 쓸 때처럼, 변화가 생긴 어떠한 상황으로도 돌아갈 수 있으며, 어떤 상황이 변경되었는지도 다 알 수 있기 때문에 매우 편리하다.

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en 

Redux DevTools

 

4. 각 Redux 함수의 생김새

• Reducer, Action

function reducer(oldState, action) {
	if(action.type === 'create') {
    	// type의 종류는 다양하다. 여기에서는 뭔가 input내용을 추가한다 던지 하는 create
        // 무언가 조작 되겠지?
    } 
}

let store = Redux.createStore(reducer) 
// 위의 코드가 store를 만들고 reducer까지 함께 만들어 주는 코드이다.

 

• Render, Subscribe

function render() {
	let state = store.getState(); 
    document.querySelector('#app').innnerHTML = "
    	<h1>Hello World!</h1>
    " } 
        
store.subscribe(render);

 

• Dispatch

<form onsubmit= "
	store.dispatch({type: "create", payload:{title: title, desc: desc}}) 
" />