01. Redux 지도

redux 지도를 보며 redux에 대해 알아보자.

store / state

redux의 핵심은 store이다. store에는 정보가 저장된다. 

store 안에는 실제 정보가 저장되어 있는 state가 있다. 이때 중요한 것은 우리는 state에 직접 접속하는 것이 불가능하다.

var store = Redux.createStore(reducer);

 redux에 createStore하게 되면 store가 생성된다.

---

reducer

store를 만들 때 가장 먼저 해야 할 것은 reducer라는 함수를 만들어 공급해야 한다.

function reducer(oldState, action){
...
}

var store = Redux.createStore(reducer);

 

ㅁstore를 생성할 때 꼭 줘야하는 인자가 reducer이다.

recuder는 함수인데 이 reducer를 작성하는 것이 중요한 일이다.

---

render / getState

render는 redux와 상관없이 UI를 만들어주는 역할을 하는 우리가 짤 코드이다.

function render(){
	var state = store.getState();
    ...
    document.querySelector('#app').innerHTML = `
    	<h1>WEB</h1>
        ...
    `
}

앞서 state에 직접 접속하는 것이 불가능하다고 했는데 store에 getState를 통해 state의 값을 가져올 수 있다.

innerHTML을 통해 state의 값을 이용해 웹페이지를 만든 다음, 이를 실행하면 UI가 된다.

지도에서 초록색 화살표를 보면

render는 내부적으로 store에서 데이터를 가져오는데, getState를 통해 state의 값을 가져오고 render에게 값을 받는다.

그리고 render가 동작하여 맨 오른쪽의 UI를 만든다.

즉, render라는 함수를 언제나 state 값을 참조하여 UI를 만드는 역할을 한다.

---

subscribe

render는 실행되면 언제나 현재 state를 반영한 UI를 만들기 때문에

store의 state의 값이 바뀔 때마다 render 함수를 호출하면 편리할 것이다.

그렇다면 state값을 바뀔 때마다 알아서 UI가 갱신될 것이다.

이때 사용하는 것이 subscribe이다.

render 함수를 subscribe에 등록할 때는 다음과 같은 코드를 사용한다.

store.subscribe(render);

위 코드와 같이 subscribe함수에 render 함수를 등록해 놓으면

state 값이 바뀔 때마다 render 함수가 호출되면서 UI가 새롭게 갱신된다.

---

action

지도의 오른쪽 UI의 Submit 버튼에는 아래와 같은 이벤트가 걸려있다.

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

onsubmit이라는 이벤트가 발생했을 때, store.dispatch에 있는 type 객체가 action이다.

이 action이 dispatch에게 전달된다.

---

dispatch

dispatch가 하는 역할은 reducer를 호출해 state의 값을 바꾼다.

그리고 그 작업이 끝나면 subscribe을 이용해 render 함수를 호출해 화면을 갱신한다.

 

dispatch가 reducer를 호출할 때 두 개의 값을 전달하는데

첫 번째는 현재의 state 값을 전달하고, 두 번째는 action 데이터를 전달한다.

function reducer(state, action){
	if(action.type === 'create'){
		var newContents = oldState.contents.concat();
        var newMaxId = oldState.maxId + 1;
        newContents.push({id:newMaxId, title:action.pa});
        
        return Object.assign({}, state, {
        	contents: newContents,
            maxId:newMaxId,
            mode:'read',
            selectedId:newMaxId
        });

reducer 코드를 보면 파라미터인 현재 state와 action이 dispatch에 의해 공급된다. 

if(action.type === 'create') 아래의 코드는 action타입이 create일 때 action에 대응하는 reducer 코드이다.

이 코드 아래에는 값을 반환해주는데 이때 반환될 객체는 state의 새로운 값이다.

즉, reducer는 state를 입력 값으로 받고, action을 창조해 새로운 state  값을 만들어내 반환해주는,

state를 가공하는 가공자 역할을 한다.

reducer가 return 하는 값이 새로운 state의 값이 되는데 state의 값이 변경이 되었으므로 render가 다시 호출되어야 한다.

그것을 dispatch가 subscribe에 등록되어 있는 구독자들을 다 호출해준다.

그러면 render가 호출되면서 getState로 가 state값을 가져와 render가 화면을 갱신해주면 새로운 state에 맞게 UI가 바뀌게 된다.

 

핵심은 state를 기반으로 화면에 그려진다는 것,

중간에 store에 있는 state에 직접 접속하는 것이 금지되어 있기 때문에 getState를 통해 값을 가져오고, dispatch를 통해 값을 변경시킨다는 것,

subscribe를 이용해 값이 변경됐을 때 구동될 함수들을 등록해준다는 것이다.

그리고 reducer를 통해 state의 값을 변경한다는 것이다.

 

강의 영상 - https://youtu.be/1U0vBNHyKaw

                - https://youtu.be/F_NLNBOqZrQ