SMALL
4. Redux가 없다면?
- 코드 작성
<html>
<body>
<style>
.container{
border: 5px solid black;
padding: 10px;
}
</style>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<script>
function red() {
document.querySelector('#red').innerHTML = `
<div class="container" id="component_red">
<h1>red</h1>
<input type="button" value="fire" onclick=
"document.querySelector('#component_red').style.backgroundColor='red';
document.querySelector('#component_green').style.backgroundColor='red';
document.querySelector('#component_blue').style.backgroundColor='red';
">
</div>
`;
}
red();
function green() {
document.querySelector('#green').innerHTML = `
<div class="container" id="component_green">
<h1>green</h1>
<input type="button" value="fire" onclick=
"document.querySelector('#component_green').style.backgroundColor='green';
document.querySelector('#component_red').style.backgroundColor='green';
document.querySelector('#component_blue').style.backgroundColor='green';
">
</div>
`;
}
green();
function blue() {
document.querySelector('#blue').innerHTML = `
<div class="container" id="component_blue">
<h1>blue</h1>
<input type="button" value="fire" onclick=
"document.querySelector('#component_red').style.backgroundColor='blue';
document.querySelector('#component_green').style.backgroundColor='blue';
document.querySelector('#component_blue').style.backgroundColor='blue';
">
</div>
`;
}
blue();
</script>
</body>
</html>
- 다른 부품을 변화시키는 한 줄의 코드가 매우 복잡한 코드 (단순X)
- 위 코드를 구현하기위해 코드의 중복성 多
- 여러 코드의 관계에 의해 고유한 특성을 가지는 코드가 존재!
- ex. document.querySelector('#component_green').style.backgroundColor='red';
- 우리의 컴포넌트가 많아지면(100개, 1만개, 1억개 이상...), 신경써야 할 코드는 기하급수적으로 늘어남
- => Redux가 필요한 이유!
728x90
'Redux' 카테고리의 다른 글
| [생활코딩] 3. Redux가 좋은 가장 중요한 이유: 로직의 단순화 (0) | 2023.01.04 |
|---|---|
| [생활코딩] 2. 리덕스 여행의 지도 (소개, state와 render의 관계, action과 reducer) (0) | 2023.01.02 |
| [생활코딩] 1. Redux란? (0) | 2023.01.01 |
댓글