노력이 좋아서
<step77>'redux(react)_기초'
zoaseo
2022. 7. 11. 09:52
1)
without.html
<!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>Document</title>
<style>
.component {
border: 5px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="yellow"></div>
<script>
function red(){
document.querySelector('#red').innerHTML = `
<div class="component">
<h1>red</h1>
<button onclick="document.querySelector('#red').style.background='red'
document.querySelector('#green').style.background='red'
document.querySelector('#yellow').style.background='red'">redColor</button>
</div>`
}
red();
function green(){
document.querySelector('#green').innerHTML = `
<div class="component">
<h1>green</h1>
<button onclick="document.querySelector('#green').style.background='green'
document.querySelector('#red').style.background='green'
document.querySelector('#yellow').style.background='green'">greenColor</button>
</div>`
}
green();
function yellow(){
document.querySelector('#yellow').innerHTML = `
<div class="component">
<h1>yellow</h1>
<button onclick="document.querySelector('#yellow').style.background='yellow'
document.querySelector('#red').style.background='yellow'
document.querySelector('#green').style.background='yellow'">yellowColor</button>
</div>`
}
yellow();
</script>
</body>
</html>2)
https://cdnjs.com/libraries/redux
redux - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Predictable state container for JavaScript apps - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare
cdnjs.com
with.html
<!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>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js"></script>
<style>
.component {
border: 5px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="yellow"></div>
<script>
// 스토어 만들기
// Redux.createStore(reducer)
function reducer(state, action){
let newState;
if(state===undefined){
return {color: 'red'};
}
if(action.type==='CHANGE_COLOR'){
newState = Object.assign({}, state, { color: action.color });
console.log(newState);
}
return newState;
}
let store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
function red(){
// state값에 접근하려면 getState()함수를 실행
let state = store.getState();
document.querySelector('#red').innerHTML = `
<div class="component" style="background-color:${state.color}">
<h1>red</h1>
<button onclick="store.dispatch({type:'CHANGE_COLOR', color:'red'})">
redColor
</button>
</div>`
}
// 구독
store.subscribe(red);
red();
function green(){
// state값에 접근하려면 getState()함수를 실행
let state = store.getState();
document.querySelector('#green').innerHTML = `
<div class="component" style="background-color:${state.color}">
<h1>green</h1>
<button onclick="store.dispatch({type:'CHANGE_COLOR', color:'green'})">
greenColor
</button>
</div>`
}
// 구독
store.subscribe(green);
green();
function yellow(){
// state값에 접근하려면 getState()함수를 실행
let state = store.getState();
document.querySelector('#yellow').innerHTML = `
<div class="component" style="background-color:${state.color}">
<h1>yellow</h1>
<button onclick="store.dispatch({type:'CHANGE_COLOR', color:'yellow'})">
yellowColor
</button>
</div>`
}
// 구독
store.subscribe(yellow);
yellow();
</script>
</body>
</html>3)
main.html
<!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>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js"></script>
</head>
<body>
<div id="subject"></div>
<div id="toc"></div>
<div id="control"></div>
<div id="content"></div>
<script>
function subject(){
document.querySelector('#subject').innerHTML = `
<header>
<h1>web</h1>
hello, web!!!
</header>`;
}
function toc(){
// 상태값 저장
let state = store.getState();
let liTags ="";
state.contents.forEach(li=>{
liTags = liTags + `
<li><a href="${li.id}" onclick="
event.preventDefault();
let action = {type: 'SELECT', id:${li.id}}
store.dispatch(action);
">${li.title}</a></li>`;
})
document.querySelector('#toc').innerHTML = `
<nav>
<ul>
${liTags}
</ul>
</nav>`;
}
function control(){
document.querySelector('#control').innerHTML = `
<ul>
<li><a href="#" onclick="
event.preventDefault();
store.dispatch({
type: 'CHANGE_MODE',
mode: 'create'
})
">create</a></li>
<li><input onclick="
store.dispatch({
type: 'DELETE',
})"
type="button" value="delete"></li>
</ul>`;
}
function content(){
let state = store.getState();
// 상태의 모드가 create면
if(state.mode === 'create'){
document.querySelector('#content').innerHTML = `
<article>
<form onsubmit="
event.preventDefault();
let title = this.title.value;
let desc = this.desc.value;
store.dispatch({
type: 'CREATE',
title: title,
desc: desc,
})
">
<p><input type="text" name="title" placeholder="title"/></p>
<p><textarea name="desc" placeholder="description"></textarea></p>
<p><button type="submit">입력</button></p>
</form>
</article>`;
}
// 상태의 모드가 read면
else if(state.mode === 'read'){
let aTitle, aDesc;
state.contents.forEach(li=>{
if(li.id === state.selected_id){
aTitle = li.title;
aDesc = li.desc;
}
});
document.querySelector('#content').innerHTML = `
<article>
<h2>${aTitle}</h2>
${aDesc}
</article>`;
}
// 상태의 모드가 welcome이면
else if(state.mode === 'welcome'){
document.querySelector('#content').innerHTML = `
<article>
<h2>welcome</h2>
hello redux!!!!!
</article>
`;
}
}
// 리듀서 함수 reducer가 리턴해주는 값이 상태!!!
function reducer(state, action){
// 상태의 초기값 설정
if(state === undefined){
return {
max_id: 2,
mode: 'welcome',
selected_id: null,
contents: [
{id:1, title:'HTML', desc: 'HTML is....'},
{id:2, title:'React', desc: 'React is....'}
]
}
}
let newState;
if(action.type === 'SELECT'){
newState = Object.assign({}, state, {
selected_id: action.id,
mode: 'read',
});
} else if(action.type === 'CREATE'){
let newMaxid = state.max_id + 1;
// let newContents = state.contents.concat();
// newContents.push({ id: newMaxid, title: action.title, desc: action.desc })
let newContents = [
...state.contents,
{ id: newMaxid, title: action.title, desc: action.desc },
];
newState = Object.assign({}, state, {
max_id: newMaxid,
contents: newContents,
mode: 'welcome',
})
} else if(action.type === 'CHANGE_MODE'){
newState = Object.assign({}, state, {
mode: action.mode,
});
} else if(action.type === 'DELETE'){
let newContents = state.contents.filter(li=>{
return li.id !== state.selected_id;
})
newState = Object.assign({}, state, {
contents: newContents,
mode: 'welcome',
})
}
console.log(action, state, newState);
return newState;
}
// 스토어 설정
let store = Redux.createStore(reducer);
// 스토어 구독하기 - state값이 변경되면 다시 실행되도록
store.subscribe(content);
store.subscribe(toc);
subject();
toc();
control();
content();
</script>
</body>
</html>