자르비 왕국

1. 문제 직면 `리액트를 다루는 기술` 책으로 리액트 공부를 하다가 코드를 똑같이 작성했음에도 프로젝트가 오작동 하는 것을 발견했다. 게시글을 수정하기 위해, write state에 기존 게시글 정보를 담고, 게시글 작성 페이지로 이동하도록 구현하였다. 하지만 게시글 정보가 계속 초기화 되었다. 리덕스 개발 툴로 확인해 보니, 게시글 수정 페이지가 unmount 될 때 write state를 초기화하는 함수가 호출되는 것이었다. 언마운트는 일어나지 않았음에도 호출되는게 이상하여 디버깅 해보니, mount -> unmount -> mount가 되고 있었다. 해당 문제에 관하여 구글링 하니 React 18버전 이후에는 컴포넌트가 두 번 호출된다는 것이었다. 2. 문제 원인 구버전에는 컴포넌트가 오직 한 번..

프로그램이 비동기 요청 중, 사용자가 페이지를 나가는 등의 행위로 인하여 불필요한 비동기 요청이 계속 호출되는 것을 방지하기 위하여, 비동기 요청을 취소할 필요가 있다. axios의 경우 자체적으로 CancelToken이라는 것을 활용하여 요청을 취소할 수 있는데, 이 기능을 Redux의 createAsyncThunk에 적용할 수 있다. createAsyncThunk import { createAsyncThunk } from '@reduxjs/toolkit' import axios from 'axios' const fetchUserById = createAsyncThunk( 'users/fetchById', async (userId, { signal }) => { const source = axios.C..

설치 npm i react-beautiful-dnd https://www.npmjs.com/package/react-beautiful-dnd react-beautiful-dnd Beautiful and accessible drag and drop for lists with React www.npmjs.com 설명서 (한국어) https://github.com/LeeHyungGeun/react-beautiful-dnd-kr GitHub - LeeHyungGeun/react-beautiful-dnd-kr: react-beautiful-dnd's Korean document. react-beautiful-dnd's Korean document. Contribute to LeeHyungGeun/react-bea..