[TIL] 엘리스 SW 엔지니어 트랙 Day 057
반응형
📖 오늘 배운 내용 - 2022.01.11
- Redux
📝 Redux
- 독립적인 라이브러리
- 리액트와 독립적이다.
- 리덕스에서는 단 하나의 객체에 애플리케이션이 사용하는 모든 데이터를 욱여넣는다.
- 함수를 이용해 상태를 바꾸고 사용한다.
- !!! 예측 가능한!!!
📝 리덕스 용어 정리
- store : state가 저장되는 곳
- 직접 접근하면 안 된다.
- dispatch: 상태가 어떻게 바뀔 건가를 정의하는 함수 === 상태 변경
- getState: state 전체를 가져온다
- subscribe: 상태가 변경되었음을 render에게 알려주는 함수
- reducer : 과거의 상태와 액션을 받아서 새로운 상태를 수정하는 담당자
- 정리
- action-dispatch-reducer-state변경-subscribe가 등록되어 있는 render 호출-render-getState-state가져오기-getState-render로 UI 만들기
📝 리덕스 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redux</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/5.0.0-alpha.0/redux.min.js" integrity="sha512-6WJ7yVV5HDZwZ0RT5CM3FCTgTt5qC5BlfQ9bG43y0BowT5a3GXQqDYaoZgCk+i9vuB1Yj6KdBPQAU8Ra7tV32w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<style>
.container{
border:5px solid black;
padding:10px;
}
</style>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="cyan"></div>
<script>
function reducer(oldState, action) {
console.log("reducer", oldState, action);
// 초기 state값 지정
if(oldState === undefined) {
return {color: 'none'}
}
const newState = {...oldState}
if(action.type === 'CHANGE_COLOR') {
newState.color = action.color;
}
return newState;
}
const store = Redux.createStore(reducer); // 생성 되자마자 reducer 함수를 1회 실행한다.
function red(){
const state = store.getState();
document.querySelector('#red').innerHTML = `
<div class="container" style="background-color: ${state.color}">
<h1>red</h1>
<input type="button" value="fire" onclick="
store.dispatch({type:'CHANGE_COLOR', color: 'red'})
">
</div>
`;
}
red();
store.subscribe(red);
function green(){
const state = store.getState();
document.querySelector('#green').innerHTML = `
<div class="container" style="background-color: ${state.color}">
<h1>green</h1>
<input type="button" value="fire" onclick="
store.dispatch({type:'CHANGE_COLOR', color: 'green'})
">
</div>
`;
}
green();
store.subscribe(green);
function blue(){
const state = store.getState();
document.querySelector('#blue').innerHTML = `
<div class="container" style="background-color: ${state.color}">
<h1>blue</h1>
<input type="button" value="fire" onclick="
store.dispatch({type:'CHANGE_COLOR', color: 'blue'})
">
</div>
`;
}
blue();
store.subscribe(blue);
function cyan(){
const state = store.getState();
document.querySelector('#cyan').innerHTML = `
<div class="container" style="background-color: ${state.color}">
<h1>cyan</h1>
<input type="button" value="fire" onclick="
store.dispatch({type:'CHANGE_COLOR', color: 'cyan'})
">
</div>
`;
}
cyan();
store.subscribe(cyan);
</script>
</body>
</html><html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/5.0.0-alpha.0/redux.min.js"></script>
</head>
<body>
<header></header>
<nav>
</nav>
<article>
</article>
<script>
function reducer(oldState, action){
if(oldState === undefined){
return {
mode:'WELCOME',
topics:[
{id:1, title:'html', body:'html is ..'},
{id:2, title:'css', body:'css is ..'}
],
id:null
}
}
const newState = {...oldState}
if(action.type === 'CHANGE_MODE'){
newState.mode = action.mode;
} else if(action.type === 'CHANGE_ID'){
newState.id = action.id;
}
return newState;
}
const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
function Header(){
document.querySelector('header').innerHTML = `
<h1><a href="/" onclick="
event.preventDefault();
store.dispatch({type:'CHANGE_MODE', mode:'WELCOME'});
">WEB</a></h1>
`;
}
Header();
function Nav(){
const state = store.getState();
let liTag = '';
for(let i=0; i<state.topics.length; i++){
let t = state.topics[i];
liTag = liTag + `
<li><a href="/read/${t.id}" onclick="
event.preventDefault();
store.dispatch({type:'CHANGE_ID', id:${t.id}});
store.dispatch({type:'CHANGE_MODE', mode:'READ'});
">${t.title}</a></li>
`;
}
document.querySelector('nav').innerHTML = `
<ul>
${liTag}
</ul>
`;
}
Nav();
function Article(){
const state = store.getState();
let articleTag = '';
if(state.mode === 'WELCOME'){
articleTag = `<h2>Welcome</h2>Hello, WEB!!`;
} else if(state.mode === 'READ'){
let topic;
for(let i=0; i<state.topics.length; i++){
let t = state.topics[i];
if(t.id === state.id){
topic = t;
}
}
articleTag = `<h2>${topic.title}</h2>${topic.body}`;
}
document.querySelector('article').innerHTML = articleTag;
}
store.subscribe(Article);
Article();
</script>
</body>
</html>
📝 Redux DevTools
const store = Redux.createStore(reducer, window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION());
💡 오늘 깨달은 것
- useReducer나 Context api를 사용하는 것보다 redux를 사용하니까 상태 관리를 보다 쉽게 할 수 있다. 또한 코드의 양도 확 줄어들어서 대박이다!
📌 참고
반응형
'프로그래밍 > Today I Learned' 카테고리의 다른 글
| [TIL] 엘리스 SW 엔지니어 트랙 Day 059 (0) | 2022.01.17 |
|---|---|
| [TIL] 엘리스 SW 엔지니어 트랙 Day 058 (0) | 2022.01.16 |
| [TIL] 엘리스 SW 엔지니어 트랙 Day 056 (0) | 2022.01.13 |
| [TIL] 엘리스 SW 엔지니어 트랙 Day 055 (0) | 2022.01.13 |
| [TIL] 엘리스 SW 엔지니어 트랙 Day 054 (0) | 2022.01.13 |