들어가기 전에
이전 시간에 action 이 일어났을 때 dispatch를 통해서 store에게 전달하고
store가 reducer를 호출해서 최종적인 state 값을 결정한다는 것을 알아봤습니다.
state 값이 바뀌면 그에 따라서 우리 애플리케이션의 UI에 모습도 바뀌어야 합니다.
이번시간에는 state값의 변화에 따라서 UI가 바뀌도록 반영해 보겠습니다.
학습목표
state의 변화에 따라서 UI가 바뀌도록 애플리케이션을 만들 수 있습니다.
핵심단어
강의 듣기
이전 시간에 만든 애플리케이션을 기반으로 state값이 바뀌는 것에 따라서 애플리케이션의 UI를 바꿔보도록 하겠습니다.
state 값이 바뀔 때마다 render() 함수가 통보 받아서 그때마다 state값에 맞게 화면에 그려 줄 수 있게 하면 됩니다.
UI를 그려주는 red() 함수는 실행할 때마다 state값을 가져오고 state 값에 따라서 자신의 color 값을 결정해줍니다.
이전에 우리가 만든 코드에서는 최초로 한번은 red()를 강제로 호출시켰습니다.
그 이후에 store.dispatch()함수가 실행되어 state 값이 바뀌는 것처럼 state 값이 바뀔때 마다
red() 함수를 호출하게 하려면 subscribe에 render() 함수를 등록해 놓아야 합니다.
이렇게 등록하면 dispatch가 state 값을 바꾸고 난 다음에 지정한 함수를 호출하도록 약속되어 있습니다.
store.subscribe(red);위 코드를 추가하게 되면 state 값이 바뀔때 마다 red() 함수가 호출됩니다.
이번에는 blue()를 만들어보겠습니다.
<div id="blue"></div>
<script>
function reducer(state, action){
if(action.type === 'CHANGE_COLOR'){
newState = Object.assign({}, state, {color:action.color});
}
//이 외 생략
}
function blue() {
var state = store.getState();
document.querySelector('#blue').innerHTML = `
<div class="container" id="component_blue" style="background-color:${state.color}">
<h1>blue</h1>
<input type="button" value="fire" onclick="
store.dispatch({type:'CHANGE_COLOR', color:'blue'});
">
</div>
`;
}
store.subscribe(blue);
blue();
</script>잘 작동하는 것을 확인할 수 있습니다. 마찬가지로 green()도 만들어보세요.
리덕스가 없을 때의 코드는 서로 강력하게 의존하고 있습니다.
이전의 blue() 는 red와 green을 알고 있습니다.그래서 red() 와 green() 을 갑자기 지워버리면 blue() 는 에러를 발생시킵니다.
그리고 만약에 새로운 컴포넌트가 추가되면 기존에 있었던 컴퍼넌트 전체를 업데이트 해야하는 문제가 발생합니다.
그런데 리덕스라고 하는 중개자를 통해서 우리가 상태를 중앙 집중적으로 관리 하게 되면
각각의 부품들은 상태가 바뀌었을 때 상태가 바뀌었다는 action을 store에 dispatch해주면 됩니다.
그리고 상태가 변함에 따라 자신이 어떻게 변화되는지에 대한 코드를 작성하고 그것을 store에 구독시켜놓으면
state가 바뀔 때마다 통보를 받기 때문에 그 때마다 자신의 모양을 바꿔 줄 수 있게 되는 것입니다.
이렇게 리덕스를 사용하면 blue 라는 부품은 green이나 red라는 부품을 몰라도 되게 됩니다. 그저 자신의 일에만 집중하면 됩니다.
코딩을 하는 우리 입장에서도 blue 라는 컴포넌트를 만들 때 blue 라는 컴퍼넌트가 해야될 일에만 집중하면 되게 됩니다.
생각해보기
1. 리덕스를 사용하는 이유
2. 리덕스를 사용하면 부품들이 왜 좋아 지는가?
3.어떻게 리덕스를 통해서 서로간의 의존성을 낮추고 각자의 부품은 stand-alone으로 사용될 수 있었는가?
위 3가지를 설명해보세요.