React (5) 썸네일형 리스트형 Fiber reconciler (outdated) 먼저 기존 reconciler와 fiber reconciler를 비교하여 보여주는 페이지가 있기에 공유해봅니다. https://claudiopro.github.io/react-fiber-vs-stack-demo/ Fiber vs Stack Demo This demo shows the differences between Stack and Fiber by rendering a Sierpinski triangle that constantly shrinks and grows, and whose nodes have a value that increments by one every second. claudiopro.github.io 위 예시에서, stack reconciler(기존 reconciler)는 왜 뚝 뚝.. [React] Reconciliation - (feat, Diffing 알고리즘) Intro. 지난 글에서 Reconcilation에 대해 잠깐 이야기를 했습니다만, 이번 글에서 Reconcilation에 대해 좀더 깊게 다뤄보려합니다. 현재 최신 reconciler는 fiber structure를 기반으로한 reconciler지만, 글에서 중점적으로 다루려고 하는 내용이 diffing algorithm이기에, stack reconciler 피쳐를 사용해 설명하겠습니다. Main. Reconcilation에 대한 지난 글을 정리하자면 다음과 같습니다. React Element Tree를 생성하는 것. (VDOM) React Element란 결국 plain Obejct이기에, tree 생성은 굉장히 빠르다. 이 과정은 setState와 render호출 시, 일어난다. VDOM 생성 후,.. React Element vs Component vs Component Instance vs React Node Intro. const MyComponent = () => { return Hello from div; }; export default MyComponent; 위와 같은 코드가 있습니다. 흔히 부르는 '함수형 컴포넌트' 입니다. 여기서 잠깐 멈춰서 생각해볼것이, 그럼 React Element란 무엇일까요? 그동안은 사실 뭐~ 동음이의어가 아닐까? 하고 넘겼었는데, 어느날 문득 의문이 들어 찾아본 결과 매우 큰 착각임을 깨닫고 글을 써봅니다. 먼저 'Component'란 무엇일까요? React 문서에 따르면 다음과 같습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. Pr.. [React] Pie Chart 만들기 이전에 css conic-gradient + property속성 조합을 통한 파이차트를 구현했었는데, 각 부분 섹션 경계선마다 aliasing이 일어난다길래, 이참에 svg로 새로 구현했습니다. 만들면서 호버 이펙트 같은 것도 알아서 넣어달라길래.. 호버 시, 각 섹션들이 얼만큼 차지하는지 비율을 보여주는 이펙트도 넣어봤습니다. Precondition 1. Data type PieChartData = { value : number, color : string } 호버 이펙트에 대해서 결정 권한을 완전히 저한테 맡기기도 했고, 호버 이펙트가 그냥 있었으면 좋겠다고만 이야기해서, 굳이 라벨에 대한 프로퍼티는 넘기지 않기로 했습니다. 데이터 인터페이스로서, 딱 위 정보만 받고, 나머지 필요한 값들에 대해선, .. [React] Bar chart 만들기 프로젝트 진행하면서, 특히 Analytics 계열 웹사이트의 경우, 차트/그래프는 뗄레야 뗄 수 없다. 회사일 중 대표(친구라 반말체로 쓰겠습니다)가 반드시! 꼭! 저 디자인 그대로 만들어달라 하길래, 걸맞는 모듈 검색하다가 문득, 차라리 만드는것이 더 빠르겠다 싶어 만들어 보았습니다. Layout 1. 차트가 여러 곳에서 다양한 크기로 쓰일 수 있음 2. 치역의 단위는 %만 사용함 3. 정의역은 개수가 정해지지 않음 4. 반응형 이정도가 조건으로 주어져서, 그에 맞게 구상을 해보았습니다. 위에 못난 그림을 정리하면 아래와 같습니다. 1. Container로 전체적인 레이아웃 조정 2. Container하위 요소들은 모두 Container 기반 상대 크기 3. 정의역이 추가될 때마다, Container내.. 이전 1 다음
