문제 상황 투두 앱 만들기 중에 오류가 발생했다. 특정 투두를 선택해 /todos/:id 페이지로 이동했더니 빈화면이 뜨고 다음의 에러가 발생했다. react-dom.development.js:19055 Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. 동기적인 입력에 응답하는 동안 컴포넌트가 중단되었다. 이는 UI가 로딩중을 나타내는 것으로 대체되게 한다. 해결하기위해 중단된 컴포넌..
시작하며 이번 원티드 프론트엔드 챌린지 과제는 React Query를 적용해보는 것이었다. 이전에 React Query를 사용해 본적이 없기에 React Query의 작동 원리와 사용하는 이유를 먼저 공부하기 시작하면서 알게된 stale-while-revalidate와 모호했던 캐싱이라는 개념에 대해 정리해보고자 한다. 캐싱(Caching)이란? Stale-While-Revalidate 전략에는 캐싱이란 개념이 사용된다. 캐싱이란 데이터나 값을 미리 복사해 놓고 있다가 요청 시에 그것을 제공하는 기술을 의미한다. 캐시는 복사본을 저장하고 있는 임시 장소를 말한다. 웹 캐시 역시 자신의 저장소 내에 요청된 리소스를 갖고 있다면 요청을 가로채 서버로 요청이 전달되는 것을 막고, 리소스의 복사본을 반환한다. ..
멋사에서 useState Hook을 배우던 중 setState의 인자로 값을 전달하는 것과 함수를 전달하는 것은 무엇에서 차이가 있는지 궁금했다. 이전에 했던 프로젝트에서도 useState Hook을 사용했던 적은 있었지만 "useState는 상태를 관리해주는 Hook이고, setState에 어떤 값을 넣어주면 그 값으로 상태가 변경돼~" 정도만 알고 사용했다. 따라서 자세한 동작 방식을 알고 setState에 함수를 전달해주는 이유를 정리하고자 글을 쓰게 되었다. setState, 무엇일까? useState가 실행되면 배열을 반환한다. 반환된 배열의 첫 번째 인덱스에는 현재 상태값(state), 두번째 인덱스에는 상태를 변경하는 함수(setState)가 저장되어 있다. 즉, setState를 통해 상태..
