Redux4 [React] 28. 리덕스 툴킷 (Redux-toolkit) 사용하기 리덕스 툴킷의 장점 리덕스 사용을 편하게 해주는, Redux toolkit이 있습니다. 리덕스 툴킷 공식 사이트 : https://redux-toolkit.js.org/ 리덕스의 문제 1. action.type에 오타가 생기는 문제 2. state가 많아질수록 파일이 길어지고 state 객체가 복잡해지며, 이때 state 객체의 중첩된 데이터를 실수로 바꾸는 문제 이 경우에 리덕스는 React Provider와 별 차이가 없어보입니다. 하지만, 리덕스는 대책이 있습니다. 리덕스의 대책 1. 리듀서를 여러 작은 리듀서 파일로 나누어서, 파일이 거대해지는 것을 막는다 2. Redux toolkit이라는 라이브러리를 사용한다. (react-redux 개발진이 추가로 만든 라이브러리) Redux toolkit은.. 2024. 4. 20. [React] 27. 리액트 용 리덕스 스토어 만들기 react-redux 설치하기 리액트에서 리덕스를 사용하기 위해, npm install redux react-redux npm으로 redux 라이브러리와, 리액트에서 redux 사용을 쉽게 해주는 react-redux 라이브러리를 설치합니다. redux store 폴더 만들기 리덕스 저장소와 리듀서 함수들을 담을 store 폴더를 만듭니다. redux store 파일 만들기 import { createStore } from "redux"; const counterReducer = (state = { counter : 1 }, action) => { if (action.type === 'increment') { return { counter: state.counter + 1, } } if (action.t.. 2024. 3. 31. [React] 26. 리덕스(Redux) 작동 방식 이전 글을 읽고 오시는 것을 추천드립니다. (이전 글 : 리덕스 vs 리액트 컨텍스트 : https://arnopark.tistory.com/858) Redux : 중앙 데이터 저장소 Redux[리덕스]는 앱에 있는 '중앙 데이터(state) 저장소'입니다. 정확히 한 개의 저장소로, 절대로 2개 이상을 갖지 않습니다. 이 하나의 저장소에 앱의 모든 state를 저장합니다. (cross-component state, app-wide state 모두를 저장합니다.) 하나의 저장소에만 모든 걸 저장하니 관리가 어려워 보일 수 있지만, 다행히도 저장소 전체를 항상 직접 관리할 필요가 없습니다. (이에 대해선 이번 강의와 다음 강의를 통해서 설명할 예정입니다.) 컴포넌트와 저장소 간의 연결방법 : 구독하기 중앙.. 2024. 3. 19. [React] 25. 리액트 앱의 state에 대한 또 다른 관점 : 리덕스 vs 리액트 컨텍스트 안녕하세요. 박기린 입니다. 이번에는 리액트 앱의 state를 다루는 또 다른 방법에 대해 알아보겠습니다. 리액트에 존재하는 3종류의 state 리액트의 state에는 3종류가 존재합니다. 1. Local state 데이터가 변경되면, 단일한 하나의 컴포넌트에 영향을 미치는 state Ex: 버튼을 누르면 어떤 정보가 표시되고, 한 번 더 누르면 정보가 다시 사라집니다. -> useState나 useReducer를 사용해서 컴포넌트 안에서 state를 관리합니다. 2. cross-component state 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 state Ex: 모달 컴포넌트는 다수의 컴포넌트에 영향을 줍니다. 모달 컴포넌트를 여는 버튼은 모달 외부에 존재하고, 모달 안쪽의 버튼을 눌.. 2024. 3. 12. 이전 1 다음
