0. 들어가며, Redux에 대해서 몇가지 공부를 했었다. 이번에는 타입스크립트와 함께 사용해볼 계획이다. [React] Redux - 기본편 [React] Redux - toolkit편 [React] Reduxt - toolkit 사용해보기편 기본적인 타입스크립트 세팅은 끝났다고 생각하고, Redux를 사용하는 부분만 작성할 예정이다. 세팅하기 yarn add @reduxjs/toolkit react-redux 리액트에서 리덕스를 사용하기 위해서 필요한 패키지를 먼저 설치한다. @types/react-redux 타입스크립트를 위해서 해당 패키지가 필요하지 않은가 생각할 수 있지만 react-redux 7.2.3버전부터 해당 패키지를 포함하고 있기 때문에 이후 버전은 설치할 필요가 없다. - src --..

상태 관리? 작은 프로젝트를 만들 때는 state를 정의하고 state를 바탕으로 필요한 컴포넌트를 랜더링 한다. 하지만 프로젝트의 규모가 커지면 부모 컴포넌트의 state가 필요한 자식 컴포넌트로 가는 깊이가 깊어질 수 있다. 그렇게 되면 필요없는 컴포넌트마저도 state가 거쳐가기 때문에 전체적인 코드가 복잡하게 된다. 그래서 나온 것이 상태 관리 시스템이다. 전역으로 상태를 관리하고 변화가 감지되면 상태를 가지고 있는 모든 컴포넌트에서 리 렌더링이 발생하는 방식이다. 만들기! 가장 일반적인 방법이 Pub-Sub 패턴으로 만드는 방식이 아닐까 싶다. 전반적인 틀을 Store라는 클래스를 만들고 해당 클래스의 state는 전역으로 관리되기 위해서 싱글톤으로 만들 것이다. 그리고 정의된 state를 각 ..

0. 들어가며, 기본적으로 Redux와 Redux - Toolkit에 대한 이론을 공부한 뒤, 작성하였습니다. [React] Redux - 기본편 [React] Redux - toolkit편 1. 프로젝트 세팅 yarn add @reduxjs/toolkit react-redux redux를 사용하기 위해서 toolkit과 react-redux만 추가로 설치해준다. 2. 개발 1. Todos Reducer import { createSlice } from "@reduxjs/toolkit"; const initialState = { todos: [], }; export const todoSlice = createSlice({ name: "todos", initialState, reducers: { addTo..

Redux Toolkit? Redux Toolkit은 Redux 팀에서 세 가지 걱정을 해결하기 위해서 등장했다. 1. Redux 스토어 환경 설정이 너무 복잡하다. 2. Redux를 쉽게 사용하기 위해선 추가로 패키지들을 설치해야 한다. 3. Redux는 많은 보일러플레이트 코드를 요구한다. 즉, Redux Toolkit은 Redux로 개발하는 과정을 단순화하여 흔한 실수를 방지할 수 있게 해 준다. ※ 보일러플레이트 코드? 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다. Redux Toolkit 사용법 Redux Toolkit API는 크게 7가지가 있다. 1. configureStore Redux의 createStore 함수와 유사한 함수이다. Reducer..

Redux는 React에서 가장 많이 사용되고 있는 상태 관리 라이브러리 중 하나이다. 최근에는 Redux Toolkit이 새롭게 생긴 김에 다시 정리해본다. Redux의 주요 개념들 1. Action ( 액션 ) 상태가 변화가 필요할 때, 액션이 발생된다. { type: 'TOGGLE_MODAL', data: { // ... } } 객체로 되어 있으며, type 속성은 반드시 필요하며, 액션을 구분하는 용도로 사용한다. 2. Action Creator ( 액션 생성 함수 ) 액션 객체를 만들어주는 함수이다. export const toggleModal = (data) => { return { type: "TOGGLE_MODAL", data, } } 액션 생성 함수를 만들어서 사용하는 이유는 쉽게 컴포넌..

state와 reducer 만들 때 타입 지정 import { Provider } from 'react-redux'; import { createStore } from 'redux'; const 초기값 = { count: 0 }; function reducer(state = 초기값, action) { if (action.type === '증가') { return { count : state.count + 1 } } else if (action.type === '감소'){ return { count : state.count - 1 } } else { return initialState } } const store = createStore(reducer); ReactDOM.render( , document...