redux의 필요성을 느껴보기 위해서 먼저 redux 없이 애플리케이션을 만들어보자.
새로운 폴더 redux를 만들어 react 환경을 구축하고,
public 폴더에 without-redux.html를 만들어 다음과 같이 코드를 작성하였다.
without-redux.html
<html>
<body>
<style>
.container{
border:5px solid black;
padding:10px;
}
</style>
<dix id="red"></dix>
<dix id="green"></dix>
<dix id="blue"></dix>
<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_red').style.backgroundColor = 'green';
document.querySelector('#component_green').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>결과화면
- red의 fire버튼을 눌렀을 경우
- green의 fire버튼을 눌렀을 경우
- blue의 fire 버튼을 눌렀을 경우
document.querySelector('#component_red').style.backgroundColor = 'red';
document.querySelector('#component_green').style.backgroundColor = 'red';
document.querySelector('#component_blue').style.backgroundColor = 'red';우리는 위 코드처럼 바꿀 색깔의 fire 버튼을 누르면 색깔 함수를 하나씩 작성하여 색을 바꾸었다.
만약 색깔 함수가 1000개가 있다면?
우리가 신경써야 할 함수는 기하급수적으로 늘어나게 된다.
그렇다면 redux를 이용하면 어떻게 될까?
'🌐 Web > Redux' 카테고리의 다른 글
| 06. Redux의 장점 : 시간여행 (0) | 2022.09.06 |
|---|---|
| 05. Redux를 이용한 애플리케이션 : state의 변화를 UI에 반영 (0) | 2022.09.06 |
| 04. Redux를 이용한 애플리케이션 : reducer와 action을 이용해서 새로운 state 값 만들기 (0) | 2022.09.03 |
| 03. Redux를 이용한 애플리케이션 : store 생성 (0) | 2022.09.03 |
| 01. Redux 지도 (0) | 2022.09.03 |