개발 블로그

개요신규 프로젝트에서 React와 D3를 사용한 차트 개발을 담당하게 되면서, 어떻게 하면 좀 더 가독성 좋고 선언적인 D3 코드를 작성할 수 있을지에 대한 고민이 있었습니다.이전 프로젝트에서 주로 사용된 방식은 DOM 요소를 직접 선택해서 데이터와 속성을 추가하는 방식이었습니다. 하지만 이러한 방식이 React에서는 효과적이지 않으며, 한 줄로 길게 체이닝을 이루는 코드가 가독성 면에서 좋지 않다고 생각하여 이를 해결하기 위한 몇 가지 개선안들을 찾아보게 되었습니다. React에서 D3 라이브러리를 효율적으로 활용하기 위한 여러 가지 방법들을 프로젝트에 적용해보며 새롭게 알게된 점들을 예제코드와 함께 간단히 정리해 보았습니다. D3.js란?D3.js는 차트, 선 그래프 등과 같은 재사용 가능한 데이터..

개요Suspense는 아직 준비되지 않은 UI 일부에 대해 로딩 상태를 선언적으로 표시할 수 있게 해주는 기능입니다.처음에는 React 16.6에서 실험적인 기능으로 소개되었는데 React 18에서 정식으로 릴리즈되면서 기능이 확장되었습니다.기존에는 주로 React.lazy와 함께 코드 스플리팅을 위해 사용됐으나 React 18부터는 코드뿐만 아니라 데이터 로딩이나 SSR 측면에서도 활용할 수 있게 되었습니다.추후에는 거의 모든 비동기 작업에 Suspense를 적용할 수 있도록 React 팀이 지속적으로 기능을 확장해 나갈 계획이라고 합니다. import { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyCompo..