홍준혁

기존에 Redux코드를 리액트 앱에서 작성하다 보면 불만이 생기기 마련이다. 왜냐하면 이렇게 까지 해야 할까 싶은 수많은 코드들 때문이다. 그래서 리덕스 측에서는 새로운 방안을 제시했는데, 그것이 바로 Redux Toolkit이다. 리덕스 코드를 정말 짧게 줄여줄 착한 라이브러리이다. 또한, 기능 또한 강력하기 때문에 한번 배워볼 가치가 있다. # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 리액트 앱에 NPM이라면 위의 명령어를, yarn이라면 밑의 명령어를 실행하여서 Toolkit을 다운로드하여 보도록 하자. Toolkit에서 어떤 기능을 제공하는지 하나하나 살펴보도록 하자. createAction 가장 먼저 createAct..

hong-junhyeok.github.io/React_Redux_Typescript_Redux-saga/?fbclid=IwAR0J-yUNKHQX08epLX1G26PsfAeVKKTWUCoo7k2IBwmtDFykr53TgOJ04fc React_Redux_Typescript_Redux-saga hong-junhyeok.github.io 리덕스와 리덕스 사가를 쓸 때 많은 분들이 러닝 커브가 높다, 헷갈린다 하시는 분들이 많길래 (실제로 나도.....) 예제를 보여주는 웹사이트를 만들어보면 어떨까 라는 생각으로 React_Redux_Typescript_Redux-saga를 개발하게 되었다. 개발 환경 깃허브 주소 github.com/Hong-JunHyeok/React_Redux_Typescript_Redux-s..

리액트에서 리덕스 구조를 이해하려면 투두 리스트만큼 가성비 좋은 게 없다. 그럼 간단히 리액트에서 투두리스트를 리덕스로 구현해보자. 먼저 src의 구조는 이렇게 크게 세가지로 나뉜다. modules는 액션 타입 , 액션 생성 함수 , 리듀서를 한 파일에서 관리하는 Ducks패턴을 모아놓은 디렉터리라고 생각하자. 즉, 기존에는 액션 타입 , 액션 생성 함수 , 리듀서이 세 가지를 각각 다른 파일에 나눠서 개발했다면 Ducks패턴은 그걸 짬뽕시켜놓은 개념이다. Ducks 패턴의 장점은 새로운 액션을 만들때 번거로운 작업을 하지 않아도 된다. 이제 component에서 간단히 input , button , ul만 태그 해놓자. 제출 그다음에 modules폴더에 todos.js라는 파일을 만들어서 액션 타입 ,..

리덕스에서는 중요한 규칙 3가지가 있다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있다. 2. 상태는 읽기 전용이다. 3. 변화를 일으키는 함수 리듀서는 순수한 함수여야 한다. 이제 하나하나 왜 그래야 하는지 보도록 하자. 먼저 1. 하나의 애플리케이션 안에는 하나의 스토어가 있다. 이는 말 그대로 하나의 스토어가 있어야 한다. 사실 여러 개의 스토러를 만드는 것도 가능하나. 권장하는 방식은 아니다. 왜냐하면 그러면 개발자 도구를 못쓴다...! 2. 상태는 읽기 전용이다. 상태는 읽기 전용이다. 이는 불변성을 유지해야 한다는 말과 같다. 우리가 기존에 리액트 프로젝트를 했을 때 setState를 통해 state를 업데이트해줬지 state에 push나 concat과 같은 함수를 사용해서 state를..

리덕스에서는 ACTION(액션)이라는 것이 있는데 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킨다. 액션은 객체 형태로 표현이 되며, 만약 1을 더하는 액션을 정의할때는 { type : "ADD" } 이런 식으로 액션을 정의할 수 있다. 그리고 액션객체는 다른 값도 넣을 수 있다. (개발자 맘대로) { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } 그리고 액션을 만들려면, 액션 생성 함수를 써야 하는데 그냥 간단히 파라미터를 받아와서 액션 객체 형태로 만들어주는 역활을 한다. export function addTodo(data) { return { type: "ADD_TODO", data }; } 왜 액션함수를 만드냐면 나중에 다른 ..

리덕스에서는 절대로 배열을 직접 바꿔서는 안 된다. 이는 리덕스에서 가장 중요한 개념 중 하나이다. 그럼 배열 수정을 어떻게 하느냐? 기존의 배열을 복사를 한 뒤, 새로운 값을 넣어 기존의 배열을 본떠 만든 새로운 형태의 배열을 리턴해주어야 한다. 기존의 배열을 복사하는 문법인 (...)을 사용해서 코드를 작성해보았다. import { createStore } from "redux"; const input = document.querySelector("input"); const submit = document.querySelector("button"); const ADD = "ADD"; const REMOVE = "REMOVE"; const todoReducer = (state = [], action) ..