따뜻한 베지밀

React, Vue 등 Virtual DOM을 채택한 경우가 많이 있습니다. DOM 이 아니라, Virtual DOM을 선택해야 하고, 사용해야 하는 이유에 대해서 알아봅시다. DOM (Document Object Model) Virtual DOM 을 알기 전에 실제 DOM에 대해서 간단하게만 알아봅시다. DOM 은 문서의 구조화된 표현을 제공하고 있으며, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 담당을 합니다. 간단하게 얘기하면 개발자들은 DOM 을 만들어내고, DOM 은 웹페이지를 구성하면서 사용자들에게 보여지는 역할을 담당합니다. Browser Workflow (webkit) Webkit 에서 Browser가 작동하는 과정을 도식화한 모습입니다. 간단하게 내용을 살..

리액트 훅에서 종속에 관한 lint 경고 react-hooks/exahaustive-deps 가 있습니다. 개발을 하다가 보면 "이런 것도 넣어야 해?" 라는 생각에 의해서 넣지 않고 싶은데 노란 줄의 경고가 심히 거슬리는 경우가 종종 생깁니다. 경고가 거슬려서 배열에 종속을 추가했을 때, 무한 재렌더링 또는 원하지 않은 동작으로 끝나는 경우가 생깁니다. 그래서 이 종속을 안 넣는게 맞지 않나? 라는 생각을 할 수 있습니다. 그 외에도 자신이 생각했을 때 변하지 않는 정적인 값을 종속으로 넣지 않으려고 하거나, 아니면 생명주기 상으로 특정값일 때만 렌더링이 되는 것을 원해서, 혹은 다른 이유에 의해서 아래와 같이 사용하는 경우도 있습니다. useEffect(() => { setCount(count + 1..

패턴에서는 세부 사항은 해당 글에서 자세하게 다루지 않을 예정입니다. 편의를 위해서 Container Presenter패턴은 PC라고 불러 얘기할 예정입니다. 추가적으로 리액트에서는 커스텀 훅이라는 마법이 있어 모든 단점을 보완할 수 있다고 생각하나, 두 패턴의 장단점을 비교하기 위해 커스텀 훅의 존재는 잠시 배제할 예정입니다. Container Presenter React의 대가인 Dan Abramov가 2015년에 제시했던 디자인 패턴입니다. Container에서 논리적인 연산, Presenter에서 렌더링되는 뷰를 담당하고 있습니다. Atomic 디자이너 Brad frost가 2013년 즈음에 창시해낸 방법으로 Atom -> Molecules -> Organisms -> Templates -> Pa..

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

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

When do we use React LifeCycle? 먼저, 리액트의 생명주기가 어떤 점에서 필요하고, 무엇인지에 대해 알아봅시다 😁 사용자와 함께하는 동적인 페이지를 만들기 위해 state와 props는 사용자에 어떤 특정 행동에 의해 값이 변합니다. 사용자가 사이트에 들어오기 전에는 특정한 API를 호출해서 데이터를 가져와야 하는 경우가 필요할 수도 있습니다. 리액트에서는 DOM(Document Object Model)에서 특정한 시간에 특정한 행동을 일어나게 할 수 있도록 생명주기를 만들었다고 생각합니다. 즉, 리액트에서 말하는 생명주기는 내가 원하는 것과 화면에 렌더링하는 구성 요소들을 일치시킬 수 있도록 DOM을 관리하는 일종의 수단이 됩니다👍 What is React Life Cycle? ..

React Fiber Architecture https://www.youtube.com/watch?v=ZCuYPiUIONs 위의 동영상은 React Fiber Architecture가 처음 나왔을 때 소개해 주는 영상입니다. What is Fiber Architecture ? 영상 초반에서 프랙탈 구조의 삼각형이 좁아지고, 넓어지면서 각각의 숫자가 바뀌는 모습을 볼 수 있습니다. 삼각형이 좁아지고 넓어지는 과정은 최상단의 노드를 기점으로 바꾸면 됩니다. 렌더링 과정에서 페이지 내부 애니메이션이 부드럽게 보이려면 16ms 내에 작업이 처리되어야 합니다 ❗️❗️ 하지만, 기존 알고리즘으로는 각각의 숫자가 바뀌는 과정이 16ms에 맞추기가 어렵습니다 😭 그렇기에 Virtual DOM을 최소화하고, 업데이트 일..