Fe-Dev/Redux

이번 포스팅에서는 리덕스 사가를 개인 프로젝트에 적용하면서 알게된 것들을 정리해보려 한다. 개인프로젝트로 next.js로 블로그를 만들고 있는데 특정 사용자의 블로그로 접속했을때 해당 블로그의 사용자 정보(계정, 블로그명 등)와 최근 게시글, 인기게시글, 최근 댓글등 과 같은 정보를 왼쪽 영역에서 공통 layout으로 표출해주고 있었다. 이 데이터들은 _app.tsx 파일에서 getInitialProps로 서버사이드에서 데이터를 가져와서 layout 파일에 props로 내려주고 있었는데 해당 레이아웃을 사용하는 파일이 여기저기 있다보니 같은 props 가 무분별하게 사용되는게 보기 좋지 않았다. 이번기회에 리덕스를 프로젝트에 적용해보고 싶기도 해서 리덕스를 사용하여 해당 데이터를 상태로 관리하되 서버사이..

이번 포스팅에서는 Redux Toolkit을 사용하여 보다 효율적으로 Redux를 사용하는 방법을 정리해보고자 한다. 목차 Redux Toolkit 이란? Redux Toolkit 설치 Redux Toolkit 기능과 사용 예시 1. Redux Toolkit 이란? Redux Toolkit은 리덕스의 복잡한 부분을 간소화하여 리덕스를 보다 쉽고 간편하게 사용할 수 있도록 만들어진 라이브러리이다. Redux Toolkit은 기존 Redux를 사용했을때 대비 아래와 같은 이점이 있다. - 초기 저장소를 설정을 기존 Redux 저장소 설정에 비해 간편하게 할 수 있음. - 기존 Redux 코드의 불필요한 반복을 줄이고 보다 간편한 코드로 작성할 수 있는 이점이 있음 - Redux 사용에 용이한 패키지(DevT..

이전포스팅에서 이어서 이번 포스팅에서는 리덕스에서 미들웨어의 기본 개념과 Redux Thunk에 대해서 정리해보려 한다. 목차 미들웨어(Middleware) 란? 미들웨어 함수 생성 비동기처리를 위한 미들웨어 : Redux Thunk 1. 미들웨어(Middleware) 란? Redux 미들웨어를 간단하게 요약하면 action을 dispatch로 전달하고 reducer에 도달하기 이전에 지정된 작업을 실행할 수 있게 해주는 중간자이다. reducer가 dispatch 받은 액션을 처리하기 전에 할 수 있는 작업들은 다양한데 예를 들면 로깅, API 비동기 작업, 라우팅 등이 있다. 2. 미들웨어 함수 생성 미들웨어의 사용 예시를 위해 리덕스 사용시 console 로그를 찍는 간단한 미들웨어 함수를 작성하였..

이번 포스팅에서는 react-redux 라이브러리에서 제공하는 Provider를 사용하여 app 전체에서 store를 사용할 수 있는 방법과 useSelector를 사용하여 상태값을 가져오는 방법, useDispatch를 사용하여 상태값을 업데이트 방법에 관해 정리해보려한다. 목차 react-redux 설치 Provider를 사용하여 store 공급하기 useSelector, useDispatch 사용법 1. react-redux 설치 우선 Provider를 사용하기 위해서 아래의 명령어를 실행하여 react-redux를 설치한다. npm install react-redux --save 2. Provider를 사용하여 store 공급하기 // index.tsx import React from 'react..

이번 포스팅에서는 리덕스에서 여러개의 reducer를 사용해야 할때 활용할 수 있는 combineReducers에 관해 간단하게 정리하는 포스팅이다. 목차 combineReducers 사용이유 combineReducers 사용법 1. combineReducers 사용이유 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { createStore } from 'redux'; import rootReducer from './reducers'; const root = ReactDOM.createRoot(document.getElementById..

이번 포스팅에서는 Redux란 무엇이고 코드 예시를 통해 사용방법에 대해 포스팅해보려한다. 목차 Redux 란? Context와 차이점 Redux 설치 및 사용 방법 1. Redux 란 ? 리덕스는 상태 관리 라이브러리로서 자바스크립트 기반의 웹 어플리케이션에서 데이터의 상태를 효율적으로 관리하기 위해 사용한다. 보통 React와 함께 사용되는 것이 일반적이지만 Angular, Vue.js 등 다른 자바스크립트 프레임워크와도 함께 사용이 가능하다. 간단하게 요약해서 app 내에서 사용되는 데이터의 상태(State)를 Store라는 하나의 저장소에서 관리하고 필요에 따라 Dipatch로 Action을 Reducer에게 전달하여 상태의 값을 변경하고 변경된 상태의 값을 컴포넌트로 전달해주는 역할을 한다. 즉..