그럼에도 불구하고

RTK의 createSelector에 대해 알아보겠습니다. 🧑🏻‍💻 createSelector createSelector는 리덕스 스토어 상태에서 데이터를 추출할 수 있도록 도와주는 유틸리티 함수입니다. 이를 통해 계산 비용이 높은 셀렉터(Selector)함수의 결과를 캐싱하여 성능을 최적화할 수 있습니다. createSelector 함수는 Reselect 라이브러리에 의해 제공됩니다. Reselect는 Redux 애플리케이션의 상태(state)가 바뀔 때만 해당 셀렉터를 다시 계산하도록 제어하여 중복 계산을 방지합니다. 기존의 useSelector의 경우 컴포넌트가 상태를 처리하는 작업이며, 컴포넌트가 리렌더링 되는 문제를 야기할 수 있습니다. 이런 문제를 미연에 방지하기 위해, createSelect..

리덕스를 이용한 프로젝트를 만들다가 아래와 같은 오류와 직면했습니다. 🧑🏻‍💻 Non-serializable value 오류 내용을 확인해보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있습니다. 여기서 직렬화란 redux에서 값을 주고 받을 때 object 형태의 값을 string 형태로 변환하는 것을 말합니다. (JSON.stringify) 역질렬화는 직렬화와 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정을 말합니다. (JSON.parse) 즉, Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 발생한 에러입니다. ⭐️ 해결 방법 HTML 삽입 미리보기할 수 없는 소스 export default configureStor..

새로고침해도 redux의 store를 유지하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 Redux-Persist Redux는 새로고침하거나 창을 닫으면 store에 저장된 state가 리셋됩니다. 이를 방지하기 위해 Redux의 Redux-Persist를 사용해 보겠습니다. 현재 Posts 상에 있는 게시물에서 View Post를 누르면 해당 게시물의 상세 페이지로 넘어가고 각각의 게시물마다 nanoid로 지정된 id를 통해 해당 페이지로 이동하고 있습니다. 내 localhost/post/:nanoid 이때 생성된 nanoid는 무작위이며, 새로고침할 때마다 redux store는 기존 state를 가지고 있지 못하고 새로운 nanoid로 생성된 게시물 리스트를 갖고 있습니다. 그렇기 때문에 기존 state가..

createAsyncThunk에 대해 알아보겠습니다. 🧑🏻‍💻 createAsyncThunk 프로그램을 개발하다 보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있습니다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행했습니다. 하지만, 위의 기능들 같은 경우 Redux와 같이 사용하기 위한 러닝커브가 조금 있기 때문에, Redux Toolkit의 createAsyncThunk를 사용해 비동기 처리를 진행하고는 합니다. 📌 사용법 createAsyncThunk 1. createAsy..

오늘은 id를 자동으로 생성해 주는 @reduxjs/toolkit nanoid에 대해 알아보겠습니다. 🧑🏻‍💻 nanoid import { nanoid } from "@reduxjs/toolkit"; nanoId는 @reduxjs/toolkit안에 내장되어 되어있는 기능으로 자동으로 id를 생성해 줍니다. 예를들어, TodoList에 새로운 Post를 게시할 때 PostList의 각각의 post에 고유한 key를 지정할 경우 유용하게 사용할 수 있습니다. 📌 AddPostForm.tsx HTML 삽입 미리보기할 수 없는 소스 const onSavePostClicked = () => { if( title && content ) { dispatch( postAdded({ id: nanoid(), title,..

connect 고차 함수와 useSelector, useDispatch에 대해 알아보겠습니다. [ 리덕스 컨테이너 컴포넌트 ] Redux 플로우 전체도 Connect Component = Container Component 리덕스 스토어와 연결되는 컴포넌트들은 모두 표현 컴포넌트(presentational component)로 작성할 수 있습니다. react-redux 같은 라이브러리가 리덕스 스토어의 상태를 표현 컴포넌트의 속성으로 전달해 주는 컨테이너 컴포넌트를 손쉽게 작성할 수 있는 리덕스 훅들과 connect()와 같은 고차 함수를 지원하기 때문입니다. 이렇게 작성하면 컴포넌트 트리를 거치면서 반복적, 계층적으로 속성을 전달하지 않아도 됩니다. 그렇다고 모든 표현 컴포넌트에 대해 컨테이너를 만드는..

오늘은 redux-thunk와 redux-saga에 대해 알아보겠습니다. 목차 [ 비동기 작업을 처리하는 미들웨어 사용 ] 오픈 소스 커뮤니티에 공개된 미들웨어를 사용하면 리덕스를 사용하고 있는 프로젝트에서 비동기 작업을 더욱 효율적으로 관리할 수 있습니다. 비동기 작업을 처리할 때 도움을 주는 미들웨어는 다양하지만, 오늘은 redux-thunk와 redux-saga에 대해 알아보겠습니다. 📌 redux-thunk: 비동기 작업을 처리할 때 가장 많이 사용되는 미들웨어입니다. 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해 줍니다. 📌 redux-saga: redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리입니다. 특정 액션이 디스패치되었을 때 정해진 로직에 따..

Redux-logger를 사용하는 법에 대해 알아보겠습니다. 📌 설치 yarn add redux-logger // yarn 사용시 npm install redux-logger // npm 사용시 📌 index.js HTML 삽입 미리보기할 수 없는 소스

리덕스 미들웨어를 사용하던 도중 다음과 같은 에러가 발생했습니다. 오류의 내용은 Redux에서 값을 주고, 받을 때 object 형태의 값을 string 형태로 변환(JSON.stringfy)하는데, 이 상황에서 변환이 불가능한 값을 전달했다는 에러입니다. 좀 더 자세히 들여다보면, action에 직렬화가 불가능한 값을 전달했다는 뜻입니다. 여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말합니다. (JSON.stringfy) 역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse) Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것입..

redux를 사용하다 보면 스토어를 만들기 위해 createStore를 사용합니다. 하지만 직접 사용해 보면 아래와 같이 밑줄이 그어집니다. 왜 그럴까요? 취소선이 그어진 곳에 마우스를 갖다대면 @reduxjs/toolkit에서 제공하는 configureStore를 쓰라고 합니다. 결과적으로 deprecated로 나오지만, 기능에 문제없이 잘 동작합니다. 하지만 RTX(Redux Tookit)을 쓰는 것을 권장하고 있습니다. redux github에 따르면 https://github.com/reduxjs/redux GitHub - reduxjs/redux: Predictable state container for JavaScript apps Predictable state container for Jav..

오늘은 Redux middleware에 대해 알아보겠습니다. 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어(middleware)'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 다음은 리덕스를 적용한 간단한 리액트 프로젝트를 준비후, 이 프로젝트를 통해 리덕스 미들웨어에 대해 알아보겠습니다. 1..

오늘은 Redux에 대해 알아보겠습니다. :) [ Redux ] Redux(리덕스)란 JavaScript 상태관리 라이브러리입니다. 여기서 말하는 상태(State)란 간단하게 말하자면 데이터를 말합니다. 덧붙이자면 상태는 컴포넌트 내부에서 사용하는 데이터라고 할 수 있습니다. 요즘은 웹 사이트를 구성할 때, 사용자에게 보이는 UI들을 하나의 파일로 몽땅 구현하지 않고, 요소들을 컴포넌트 단위로 구성하여 조합하는 식으로 만듭니다. [ Redux의 원칙 ] 1. Single source of truth - 동일한 데이터는 항상 같은 곳에서 가져옵니다. - 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미입니다. 2. State is read-only - 리액트에서는 setState 메소드를 활용해야만 상태..