React 공부하기
1.React - useState 비동기 동작 때문이 아니었다
결론부터 말하자면 이 문제는 useEffect훅을 이용해 해결할 수 있다. 그러나 해결방법은 둘째치고 그 때부터 가지고 있던 호기심을 해소하기 위해 글로 정리해보았다.먼저 airbnb 클론코딩 당시에 작성했던 추악한 코드를 살펴보자. 당시 상태관리에 대해 이것저것 실험
2.React - useState 비동기 동작방식
batching...? React v17까지 Batching은 이벤트 핸들러 내부에서 다수의 state를 업데이트할 때 보다 나은 퍼포먼스를 위해 한번에 묶어서 re-rendering하는 것을 말했었다. 예시로 쓰인 코드는 다음과 같다. 때문에 당시의 리액트는 fe
3.ContextApi - 사용법과 주의점
공식문서를 확인하면서 Context API가 단순히 props drilling을 막기 위해서 사용하는 것이 아니라는 사실을 알게되어 Context API의 사용법과 고려사항을 정리해보려고 한다. context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데
4.useEffect와 싸우기(1)
web dev simplify
5.useEffect와 싸우기(2) - useMemo
no more useEffect
6.react query example
7.useState vs useReducer
리액트는 상태관리를 위해 useState, useReducer라는 두 종류의 훅을 제공한다. 상태를 저장하고 변경한다는 점이 동일하기 때문에 왜 같은 역할을 하는 훅을 두 종류나 제공하는지 의문이 들 수 있다. 때문에 본문에서는 두 훅을 비교하여 차이점을 정리하고 us
8.useReducer 개요
상단에 게시된 gif는 리덕스 공식문서에서 리덕스의 데이터 흐름을 표현하기 위해 게시한 그림이다. 이 중 Reducer함수를 감싸고 있는 Store만 제외한다면, useReducer훅에서 일어나는 데이터 흐름과 굉장히 유사하다. 리액트 공식문서 useReducer(ht
9.use hook - experimental
use() 훅은 현재 experimental 버전에서만 지원합니다.data fetching에서 useState, useEffect 대신 사용할 수 있다.컴포넌트 최상단이 아니어도 사용 가능하다.loading, error는 Suspense와 Errorboundary로 컨
10.useEffectiveEvent - experimental
useEffectiveEvent() > useEffectiveEvent() 훅은 현재 experimental 버전에서만 지원합니다. 등장배경 아래 코드는 url이 변화할 때마다 새로운 채팅방에 연결하는 컴포넌트다. 그러나 onConnnected에 props로 받