dispatch (2) 썸네일형 리스트형 useNavigate 로 인한 렌더링 문제 [여행역할] 이라는 사이드 프로젝트를 진행하며 겪은 오류 현재 나는 React 를 사용하며 사이드프로젝트 프론트쪽을 맡아서 하고 있는데, 서버에서 데이터를 요청해 계속해서 여행 계획에 대한 데이터들을 보여줘야하는 상황이였다. 여행계획을 세우는 방으로 입장을 했을 때, useNavigate를 사용해서 라우터 이동을 했는데 axios 요청보다 더 빠르게 페이지가 이동되어서 렌더링에 문제가 생기게 되었다. 그래서 페이지가 이동하기 전에, 여행 계획 데이터를 먼저 받고 페이지가 이동될 수 있도록 코드를 구현했더니 렌더링에 문제 없이 잘 작동하는 걸 확인할 수 있었다. 하지만 이게 좋은 코드인가? 라고 생각해보면 좋아보이지 않는다.. const handleInRoom = useCallback(() => { dis.. [React Hooks] useReducer useReducer 란 - state(상태) 를 관리하고 업데이트 하는 hook 인 useState 를 대체할 수 있는 Hook - useState 처럼 state를 관리하고 업데이트 할 수 있는 hook useReducer 의 매력 - 한 컴포넌트 내에서 state 를 업데이트 하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해줌 => state 업데이트 로직을 분리하며 컴포넌트 외부에 작성하는 것을 가능하게 함으로써, 코드의 최적화를 이루게 해줌. useReducer 와 useState 의 사용 차이 useState - 관리해야 할 state 가 1개일 경우 - state가 단순한 숫자, 문자열 또는 Boolean 값일 경우 useReducer - 관리해야 할 state 가 1개 이상, .. 이전 1 다음
