시작하는 중

https://blog.mathpresso.com/react-deep-dive-fiber-88860f6edbd0 React Deep Dive — Fiber 선언형 UI 라이브러리의 동시성 렌더링 기술 blog.mathpresso.com 공식문서에서 링크된 깃허브 글 보다가 이 글이 너무 좋아서 이 글을 메인으로 대체! incremental rendering(증분 렌더링) 렌더링에 있어서 싱글스레드 언어인 JS가 비동기처럼 동작하기 위해서 오래걸리는 것을 먼저 처리하기 위해 우선순위를 정하는 것 리액트의 다자인 원칙 글에서 리액트는 pull 스케쥴링을 채택하고 있다고 하였다. push 스케쥴링은 요청이 들어오는 즉시 처리되기에, 오래걸리는 작업이 들어 뒤에 여러 작업들이 남아있다면 UX적인 측면에서 좋지 ..

https://github.com/reactjs/react-basic 리액트의 작동방식 리액트의 핵심 전제 웹 페이지의 UI는 단순히 데이터를 다른 형태의 데이터로 반영한 것에 불과하기에 순수 함수로써 동일한 입력이라면 동일한 출력을 가진다는 전제가 깔려 있다. function NameBox(name) { return { fontWeight: 'bold', labelContent: name }; } 추상화 하지만 복잡한 UI를 하나의 함수에 담을 수는 없다. UI를 구현 세부 정보가 유출되지 않는 재사용 가능한 조각으로 추상화하는 것이 중요하다. 예를 들어 다른 함수에서 한 함수를 호출하는 것이다. -> 여러 언어들은 객체지향을 통해 추상화를 하며 하나의 함수에 모든 로직을 담으려는 리스크를 지려고 하지..

https://react.dev/learn/preserving-and-resetting-state Preserving and Resetting State – React The library for web and native user interfaces react.dev UI 트리 리액트가 컴포넌트들을 어떻게 구조화하고 평가할지 판단하기 위해 리액트가 트리 구조로 만든 UI들이다. 이 UI 트리를 바탕으로 React DOM을 구성하는 것! UI 트리와 React DOM트리는 같지 않다. 컴포넌트 A의 자식 요소로 B와 C가 들어있고 이를 리액트 DOM트리로 구성한다. 상태는 그러면 어디에 존재할까? 구성 요소 안에 상태가 존재한다고 할 수 있지만, 사실 react 자체에 속해있다. 이를 기반으로, 리액트는..

클로저에 관해 정리하고 생각해보면서, 리액트에서 클로저는 어떻게 적용될지를 생각해봤다. 우선, useState가 먼저 떠올랐다. useState는 어떤 원리로 동작하는가 이를 살펴보기에 앞서, 내가 리액트를 처음 사용할 때 헷갈렸던 부분이다. const NewComponent = () => { let count = 0; const btnClickHandler = () => { count += 1; console.log(count); }; return ( {count} + ); }; 버튼을 누르면 절대로 count는 올라가지만, 렌더링된 div태그의 count는 0에서 변하지 않는다. ? 왜일까 널리 퍼져있는 내용이기에 신경쓰지 않았지만, 원리는 있을 것이다. 이는 리액트의 작동방식과 관련이 있다. 컴포넌..