들어가기 전에
이전 시간에 작성한 코드는 정적인 웹 페이지와 거의 차이가 없습니다. 이번 시간에는 리덕스와 연결시키는 작업을 진행해보겠습니다.
그리고 리덕스와 연결하면서 생기는 변화에 대해 살펴보도록 하겠습니다.
학습목표
리덕스를 도입하기 위해 store를 생성할 수 있고 리덕스를 이용하여 state를 적절히 활용할 수 있습니다.
핵심단어
- store
- state
강의 듣기
들어가기 전에
이전 시간에 작성한 코드는 정적인 웹 페이지와 거의 차이가 없습니다. 이번 시간에는 리덕스와 연결시키는 작업을 진행해보겠습니다.
그리고 리덕스와 연결하면서 생기는 변화에 대해 살펴보도록 하겠습니다.
학습목표
리덕스를 도입하기 위해 store를 생성할 수 있고 리덕스를 이용하여 state를 적절히 활용할 수 있습니다.
핵심단어
강의 듣기
이번 시간에는 리덕스를 사용해보겠습니다. 리덕스를 사용하기 위해선 먼저 store를 만들어야 됩니다.
Redux.createStore(reducer);
store를 만들 때는 리덕스라는 전역객체의 createStore()라고 하는 함수를 호출합니다. 이때 reducer를 꼭 줘야 합니다.
function reducer(state, action){
if(state === undefined){
return {
contents:[
{id:1,title:'HTML',desc:'HTML is ..'},
{id:2,title:'CSS', desc:'CSS is ..'}
]
}
}
}
reducer는 호출될 때 이전의 state값과 호출된 이후인 action값을 입력 값으로 받고 리턴해주는 값은 새로운 state 값이 됩니다.
store를 처음 생성하면 최초 1회 action과는 상관 없이 호출되는데 그때 state 값은 undefined입니다.
만약 state 값이 undefined라면 초기값을 세팅합니다. 최초로 애플리케이션이 필요할 만한 데이터를 넣어 주시면 됩니다.
일단은 두 개의 글목록을 넣어보겠습니다. contents라고 하는 property로 각각의 글에 대한 객체 배열을 주는 코드입니다.
contents 를 기반으로 해서 글 목록을 표현하는 것부터 만들어보겠습니다.
var store = Redux.createStore(reducer);
reducer를 createStore()에 입력 값을 주고 그렇게 만들어진 store를 어떤 특정 함수에 속해있지 않은 상태로 변수를 선언합니다.
이 변수는 애플리케이션 전역에서 사용할 수 있는 변수가 되는 것입니다.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script>
</head>
정상적으로 작동하기 위해 redux cdn 파일을 위의 코드와 같이 추가합니다.
reducer에 초기값으로 contents라고 하는 property가 있는 state 값이 잘 만들어졌는지 확인해보겠습니다.
콘솔창에 store.getState()를 통해서 확인할 수 있습니다.
위의 화면처럼 contents 라는 초기 값이 들어가고 contents는 0과 1 이라고 하는 인덱스에 각각의 글에 대한 객체를 담고 있습니다.
다음으로는 TOC의 내부의 글목록을 store에 있는 정보를 바탕으로 가져오려면 getState()를 사용합니다.
그리고 반복문을 통해 liTags라는 변수로 contents안의 내용을 가져오도록 코드를 작성합니다.
function TOC(){
var state = store.getState();
var i = 0;
var liTags = '';
while(i<state.contents.length){
liTags = liTags + `
<li>
<a href="${state.contents[i].id}">${state.contents[i].title}</a>
</li>`;
i = i + 1;
}
document.querySelector('#toc').innerHTML = `
<nav>
<ol>${liTags}</ol>
</nav>
`;
}
이렇게 코드를 수정하고 실행해보면 잘 동작하는 것을 확인할 수 있습니다.
각각의 구성 요소가 store에서 state를 가져오고 그 state값을 기반으로 html 코드를 생성하면
state값에 따라서 만들어지는 웹 페이지를 생성할 수 있게 된 것입니다.
생각해보기
state 값을 직접 가져오지 못하는 이유는 무엇인가요?