React 18 버전에서 컴포넌트별 lazy loading 을 구현하다 rabbit hole 에 빠져 허우적 댄 경험을 까먹지라도 않으려고 포스팅을 남긴다. 그 전에 race condition 이 뭔지 알아보고 가자 간단하게 말하면 두 개 이상의 스레드가 하나의 공유 자원에 접근해서 일어나는 상태 ( 또는 그로 인해 발생하는 버그 ) 라고 생각하자 더 쉽게 두 개 이상의 스레드 = 유저가 두개의 검색을 실행하면 fetch('your_url?example=예시') 이런게 두개 실행된다. 하나의 공유 자원 = fetch 로 받아온 data 로 뿌려지는 ui JS 가 두 개 이상의 스레드? 우리가 쓴 코드는 싱글 스레드로 실행되지만, 브라우저는 멀티 스테르도 작동한다. 버그가 발생하는 코드 예시 const S..

React 로 만들어진 페이지에서 게시판이나 카테고리의 글 등이 나타나기 전 "로딩중..." 또는 이미지로 progress bar 가 나타나는 경우가 존재한다. 데이터를 서버로 부터 받아오기 전 비어있는 페이지, 또는 데이터를 받아온 후 레이아웃이 변경되며 페이지가 전체적으로 덜컥거리는 현상을 React Suspension 로 감출 수 있다. 일반적으로 데이터를 불러와 component 에 뿌리고 싶을 때 일반적으로 아래와 같이 코드를 작성한다. const [work, loading] = fetch data('/work') if (loading) { return } return loading 변수에 지정된 값이 true 라면 로딩중을 나타내는 식으로 말이다. 이부분을 React 의 Suspense 로 최..