
결론부터 말하자면 이 문제는 useEffect훅을 이용해 해결할 수 있다. 그러나 해결방법은 둘째치고 그 때부터 가지고 있던 호기심을 해소하기 위해 글로 정리해보았다.먼저 airbnb 클론코딩 당시에 작성했던 추악한 코드를 살펴보자. 당시 상태관리에 대해 이것저것 실험
batching...? React v17까지 Batching은 이벤트 핸들러 내부에서 다수의 state를 업데이트할 때 보다 나은 퍼포먼스를 위해 한번에 묶어서 re-rendering하는 것을 말했었다. 예시로 쓰인 코드는 다음과 같다. 때문에 당시의 리액트는 fe
공식문서를 확인하면서 Context API가 단순히 props drilling을 막기 위해서 사용하는 것이 아니라는 사실을 알게되어 Context API의 사용법과 고려사항을 정리해보려고 한다. context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데
web dev simplify
no more useEffect
리액트는 상태관리를 위해 useState, useReducer라는 두 종류의 훅을 제공한다. 상태를 저장하고 변경한다는 점이 동일하기 때문에 왜 같은 역할을 하는 훅을 두 종류나 제공하는지 의문이 들 수 있다. 때문에 본문에서는 두 훅을 비교하여 차이점을 정리하고 us

상단에 게시된 gif는 리덕스 공식문서에서 리덕스의 데이터 흐름을 표현하기 위해 게시한 그림이다. 이 중 Reducer함수를 감싸고 있는 Store만 제외한다면, useReducer훅에서 일어나는 데이터 흐름과 굉장히 유사하다. 리액트 공식문서 useReducer(ht
use() 훅은 현재 experimental 버전에서만 지원합니다.data fetching에서 useState, useEffect 대신 사용할 수 있다.컴포넌트 최상단이 아니어도 사용 가능하다.loading, error는 Suspense와 Errorboundary로 컨
useEffectiveEvent() > useEffectiveEvent() 훅은 현재 experimental 버전에서만 지원합니다. 등장배경 아래 코드는 url이 변화할 때마다 새로운 채팅방에 연결하는 컴포넌트다. 그러나 onConnnected에 props로 받