TypeScript 2

[D3] D3 Enter Update Exit with React

데이터 시각화 라이브러리 D3를 다루어 봅시다. 해당 라이브러리는 리액트에 사용하기에는 어쩌면 어려울 수 있는 저수준 라이브러리입니다. 그러나 시각적으로 재미있는 기능이 많고, 자주 쓰는 라이브러리이므로 간단한 명령어를 알아봅시다. Enter, Update, Exit Enter, Exit라는 명령어를 보았을 때 생각났던 것은, 객체에 마우스가 들어오고 나갔을 때 시점을 생각했습니다. 그러나 이는 아예 달랐습니다. Update라는 것은 선택한 요소들의 attr값을 바꿔주는 것 뿐입니다. 요소들을 다시 선택해서 재활용을 시도합니다. 막대의 너비로 데이터를 표시했다면, 높이나 x,y 좌표 등은 그대로 놔두고 너비의 값만 바꾸어 줍니다. Enter는 data()로 받아들인 요소의 수가 이미 존재하는 객체보다 많..

Web/Library 2022.03.07

[React] Context API를 통한 전역 상태 관리 (with Typescript)

Context API로 상태관리를 해보자 😁 이번 글은 전역적으로 상태를 관리하는 방법 중 리액트 자체에서 제공하는 Context API를 사용해서 다루어 보는 법을 알려드리려고 합니다. Context API가 뭔데요? 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달됩니다(props drilling). 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있습니다. Context API를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. 쉽게 풀어서 얘기하자면, 위에서 아래로 주면서 props가 너무 많이 전달되는 현상을 없애기 위해서..

Web/React 2022.02.16