[부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] 리덕스가 없다면

리덕스없이 간단한 애플리케이션을 만들어 보고, 다음 포스트에서 리덕스를 사용하여 같은 기능을 하는 애플리케이션과 비교해볼 수 있도록 하자.

 

color_change.html

브라우저 화면

저번 포스트에서 리덕스가 좋은 이유를 설명할 때 사용했던 박스 이미지를 코드로 구현한 것이다.

onclick 이벤트가 발생했을 때 자기 자신의 배경색을 <h1> 태그의 색 이름대로 바꾼다.

 

이제 새로운 요소로 "green" id를 가지는 div를 생성한다.

color_change.html

브라우저 화면

지금은 red와 green 요소 각각 fire 버튼을 누르면 자신의 색만 변경된다.

다른 요소들과 상호작용하도록 fire 버튼을 누르면 자신의 색대로 다른 모든 요소가 변경되도록 코드를 수정한다.

color_change.html

여기서 blue 요소를 추가하면 마찬가지로 다른 요소들에도 코드를 추가해야한다.

 

이렇게 서로가 서로에게 영향을 주는 요소들이 개수가 아주 많아지게 되면, 코드 가독성도 떨어질 뿐아니라 유지보수 측면에서 관리하기도 아주 어려워진다.

 

다음 포스트에서 리덕스를 사용하면서 이러한 문제가 어떻게 해결되는지 알아보자.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web231/lecture/1387448

웹 프론트엔드 시작하기 (리액트&리덕스)