그럼에도 불구하고

React Query에 대해 알아보겠습니다. 🧑🏻‍💻 React Query란? 공식문서에 따르면 React Query란 fetching, caching, 서버 데이터와의 동기화를 지원해 주는 라이브러리라고 합니다. React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. React Query는 우리에게 친숙한 Hook을 사용하여 React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안한다고 합니다. - 카카오페이 React Query 설명 인용 또한 카카오페이 프론트엔드 개발자분들의 말을 더 빌려보자면, React Que..

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

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

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