DH의 개발 공부로그

Redux Toolkit 리덕스 툴킷이란 리덕스의 여러가지 불편했던 부분들을 리덕스 팀에서 개선하고, 더욱 효율적으로 리덕스를 이용할 수 있도록 만든 도구 모음입니다. 그리하여 리덕스 공식문서에서는 러덕스 툴킷이 필수는 아니지만 사용하기를 적극 권장하고 있습니다. Redux Toolkit의 장점 초기 설정이 간편해졌습니다. 리덕스 툴킷 내부에 설치되어있어서 더이상 다양한 패키지들를 설치 하지 않아도 됩니다. (redux devtool, immer, thunk 등등) 반복되는 코드가 많아서 코드가 복잡해졌던 부분이 개선되었습니다. 툴킷에서는 더이상 불변성을 신경쓰지 않아도 됩니다. 코드 비교 및 사용 방법 1. createSlice 기존 리덕스에서는 action value, action creator, i..

Redux store state 접근 React-Redux의 Hooks인 useSelector와 useDispatch를 이용하여 리덕스 스토어 state에 접근할 수 있습니다. 1. useSelector useSelector를 사용하여 스토어에 저장 되어 있는 데이터, state를 읽을 수 있도록 도와줍니다. 한마디로 useSelector의 결과물은 store.getState()했을 때의 결과물과 동일합니다. import { useSelector } from 'react-redux'; const toDoList = useSelector((state) => state.toDoList) 2. useDispatch useDispatch는 리덕스 스토어의 dispatch 를 함수에서 사용 할 수 있게 해주는 H..

프로젝트 설명 리덕스를 공부하는 이유가 리덕스를 이용해서 리액트에서의 상태관리를 보다 편하게 작업을 하기 위해서였는데, 공부를 해보니 꼭 리덕스가 리액트와 함께 사용이 안되어도 가능하다는 것을 알게 되었습니다. 그래서 우선 자바스크립트에서 사용하는 법을 먼저 연습해보고 리액트에서 사용법을 공부해야겠다 생각을 하여 자바스크립트 투두리스트를 만들어 보았습니다. 폴더구조 yarn과 vite로 작업을 하였고 폴더 구조는 다음과 같이 간단하게 작업을 했습니다. index.html - body부분 To Dos Add index.js 1. 변수 선언 및 form 이벤트 추가 우선 변수들을 선언하고 onSubmit함수를 만들어 주었습니다. const $form = document.querySelector('form')..

Redux 란? 리덕스란 공식문서에서는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.라고 설명을 합니다. 조금 쉽게 설명을 덧붙여 보자면 리덕스는 복잡한 state 관리를 중앙집권화하여 단순하게 처리할 수 있게 도와주는 자바스크립트 라이브러리입니다. Redux를 구성하는 키워드 스토어 (Store) 액션 (Action) 디스패치 (dispatch) 리듀서 (Reducer) 구독 (subscribe) 1. 스토어 (Store) 리덕스에서는 하나의 스토어를 만들게 되고, 그 스토어 안에 현재의 state와, 리듀서를 주입해줍니다. 그리고 스토어에는 추가적으로 몇가지 내장 함수들이 있기도 합니다. 스토어의 상태를 바꾸는 것이 리덕스의 핵심입니다. 2. 액션 (Action) state에 어떠한 변화가..