기본적인 Redux 사용방법에 대해서 알아봤다. 이제 이 Redux를 좀 더 편하게, 그리고 가볍게 사용할 수 있는 @reduxjs-toolkit 패키지에 대해 알아보고자 한다. 1. 다운로드 npm install @reduxjs/toolkit yarn add @reduxjs/toolkit 둘 중에 편한 것으로 하자. 그리고 기존에 Redux가 설치되어있는 프로젝트라면 package.json에 들어가서 Redux를 삭제하자. 왜냐면 @reduxjs-toolkit에는 Redux의 모든 게 다 들어가 있기 때문이다. 2. 적용 이제 필요한 곳에 사용해보자. 여기서는 createSlice와 configureStore을 사용할 것이다. 예시는 마찬가지로 counter이다. 이 gif를 보면 증가, 5만큼 증가,..

이번에는 Context API의 대안으로 떠올랐던 Redux의 기본 흐름에 대해서 살펴보려고 한다. 가장 쉬운 예시인 숫자 증가/감소로 설명하겠다. 1) Redux를 불러온다. const redux = require('redux') 2) 스토어를 만든다. const store = redux.createStore(""리듀서 이름"") 리덕스 라이브러리에 노출되는 방법이다. 파라미터로 리듀서가 들어가는데, 이는 어떤 리듀서가 스토어를 바꾸는지 스토어가 알아야 하기 때문이다. 3) 스토어에 들어갈 리듀서 함수를 작성한다. // 1 const counterReducer = (state = { counter: 0 }, action) => { // ... } // 2 const initialState = { cou..

을 요약하고 동시에 제 나름대로의 생각이 담겨 있는 글입니다. Redux 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 리덕스를 이해하기 위해선 우선 Flux라는, 리덕스의 기반이 되는 개념을 알아야 한다. 여기에 Flux에 대한 설명을 최대한 쉽게 해 두었다. 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. 물론 리덕스를 사용하는 것이 유일한 해결책은 아니다. Context API를 통해서도 똑같은 작업을 할 수 있다. 리액트 v16..