React/Redux (6) 썸네일형 리스트형 [React] Redux-toolkit : createSlice, createAsyncThunk, configureStore 원래 하던대로 Redux 상태관리 코드를 짜다가 '아 왜이렇게 폴더가 많아!!!!' '왜이렇게 코드길이가 길어!!!!!' 궁시렁대면서 어찌저찌 store 부터 dispatch까지 구현했는데 데이터를 받아오는 거 처음부터 화면도 안떠서 화가 났었던 오늘.. 그리고 진짜 너무 오랜만에 React 프로젝트를 만들다 보니 Redux를 사용하는데 있어서 부가적으로 필요한 라이브러리들도 골치 아프고 요건 또 뭐야.. 열심히 iOS공부하는 동안.. createStore는 지원도 안하고.. 저걸 어떻게 바꾸지? 하면서 구글링 하던 중,, redux-toolkit에 대해 알게 되는데..! 서론이 길었지만,, 코드도 짧게 할 수 있고 라이브러리도 덜 사용하는 이 redux-toolkit에 대해 포스팅을 시작해보겠당 Red.. [React] Redux #3 | 리덕스 모듈 만들기 리액트 프로젝트에 리덕스를 적용하기 위한 리덕스 모듈을 만들어보자! 💡리덕스 모듈? 다음 항목들이 모두 들어있는 자바스크립트 파일 액션 타입 액션 생성함수 리듀서 위 항목들을 리덕스를 사용하기 위해 각각 다른 파일에 저장할 수도 있다. 액션과 리듀서가 서로다른 파일에 정의되어 있을 수도 있지만, 개발하는데 꽤나 불편할 수도 있으므로 리듀서와 액션 관련 코드들을 하나의 파일에 몰아서 작성해보자! (Duck 패턴) 1️⃣ counter 모듈 만들기 첫번째 모듈, counter을 만들어보자! modules/counter.js // 액션 타입 만들기 // Ducks 패턴을 따를 땐, 액션의 이름에 접두사 넣어주기! // 다른 모듈과 액션이름이 중복되는 것을 방지할 수 있음! const SET_DIFF = 'co.. [React] Redux #3 | 리덕스 사용 준비 리덕스 라이브러리 설치 yarn add redux redux 를 불러와서 redux에 내장된 API를 사용해보고 연습해보자! exercise.js import { createStore } from 'redux'; // createStore 는 스토어를 만들어주는 함수 // 리액트 프로젝트에서는 단 하나의 스토어를 만든다. // 리덕스에서 관리할 상태 정의 const initialState = { counter: 0, text: '', list: [] }; // 액션 타입 정의 // 액션 타입은 주로 대문자! const INCREASE = 'INCREASE'; const DECREASE = 'DECREASE'; const CHANGE_TEXT = 'CHANGE_TEXT'; const ADD_TO_LIST .. [React] Redux #2 | 리덕스의 3가지 규칙 1️⃣ 하나의 애플리케이션 안에는 하나의 스토어 키워드 포스팅에서 작성했듯 하나의 애플리케이션 안에는 하나의 스토어가 있어야한다. 여러개가 가능하지만, 권장 X 특정 업데이트가 너무 빈번, 애플리케이션의 특정 부분을 완전히 분리시킬 때 여러개! 개발도구를 사용하지 못하게 됨.. 2️⃣ 상태는 읽기 전용 (불변성 유지) 기존의 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식! 개발자 도구를 통해서 뒤로 돌리고 혹은 다시 앞으로 돌릴 수 있다. shallow equality 검사 : 내부적으로 데이터가 변경되는 것을 감지하는 검사 방식 곧, immutable.js 혹은 immer.js를 사용하여 불변성을 유지하며 상태를 관리하는 방법에 대해 배우게 될 것! 3️⃣ 변화를 일으키는 함수, 리.. [React] Redux #1 | 주요 키워드 Redux의 주요키워드는 대부분 useReducer을 사용할 때 접해본 개념들이다! 1️⃣ 액션 (Action) 상태에 어떤 변화가 필요할 때, 액션을 발생! 하나의 객체로 표현 { type: 'TOGGLE_VALUE" } type 필드가 필수적, 그 외의 값들은 개발자 마음! 2️⃣ 액션 생성 함수 (Action Creator) 액션을 만드는 함수 단순히 파라미터를 받아와서 액션 객체 형태로 만듦. export function addTodo(data){// data를 파라미터로 받아옴. return {// 액션 객체 형태로 만듦 type: 'ADD_TODO', data }; } //화살표 함수로도 만듦! (파라미터로 받아오는 대신!) export const changeInput = text => ({.. 이전 1 2 다음
