리액트로 웹앱을 개발하기 시작하게 되면, Redux dev tool을 설치하게 된다. 게시글에 들어가기 앞서 Redux에 대한 개념부터 짚고 가도록 하겠다. ✨ Redux(리덕스란)? JavaScript(자바스크립트) 상태관리 라이브러리이며, 본질은 Node.js 모듈이다. ✨ Redux의 3가지 원칙 1. Single Source of Truth - 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미. 2. State is read-only - 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능. - 같은 맥락으로, 리덕스에서도 액션(action) 이라는 객체를 사용해서만 상태 변경이 가능. 3. Changes are made with pu..

상태를 효율적으로 관리하고 보여주는 것이 프론트엔드 역량의 핵심이라는데.. 여기서 자주 나오는 용어인 '상태 관리'는 무엇인가? Front-End 에서의 '상태관리'란? 1. 데이터를 설계된 UI/UX에 맞게 설계하고 구현하는 일이며, 2. 네트워크를 통해 서버로 전달되는 client의 요청에 따라 변화하는 상태를 관리하는 일. 상태관리 방법 1. 프레임워크 등장 - React, Vue, Svelte 등의 프레임워크 등장 - 앵귤러의 등장으로 상태는 과거의 DOM에서 탈출할 수 있게 되었다. front-end 개발자는 DOM이 아닌 JavaScript에서 상태를 관리할 수 있게 되었다. 즉, DOM에 접근하는 로직이 필요없어지게 되었다는 것이다. 거기에다 필요한 상태들을 controler에 모아서 관리하..