10

State: A Component's Memory프론트엔드 개발에서 상태(state)는 사용자 인터페이스를 이루는 특정 시점의 데이터를 말한다. 따라서 상태는 동적으로 변화하는 데이터다. 사용자와의 상호작용이나 네트워크 응답과 같은 이벤트에 따라 변경되므로 UI의 렌더링에 직접적인 영향을 미친다. 상태에 따라 UI는 표시되거나 숨겨질 수 있다. 또 사용자와의 상호작용 중 현재 시점의 맥락을 의미하기도 한다. 입력값, 목록에서 선택된 항목, 여러 단계의 프로세스가 있는 경우 현재 위치한 페이지를 기억할 필요가 있다. 이는 모두 '상태'다. React 컴포넌트의 상태란 일종의 컴포넌트 별 메모리다. 각각의 컴포넌트가 기억해야 하는 정보를 의미한다.function App(): React.ReactElement..

순수 함수순수 함수는 두 가지 조건을 만족해야 한다.참조 투명성(Referential Transparency)부작용 없음(No Side Effects)아래 함수는 순수 함수라고 할 수 있다.function add(a, b) { return a + b;} 동일한 인자(`a`, `b`)가 주어지면 항상 동일한 결과를 반환한다. 또 이 함수의 결과가 외부의 상태를 변경하지 않는다. 반면 아래 함수는 순수 함수라고 할 수 없다.let count = 0;function increase() { return ++count;} 함수 외부의 변수 `count`에 의존하고 있기 때문에 동일한 인자가 주어지더라도 다른 값을 반환할 수 있다. 다른 함수에서 `counter`에 접근할 수 있기 때문이다. 따라서 순수..

Reconciliation을 구현하기 전에 `workLoop()`와 `doNextWork()`를 변경했다.변경 목적은 전체 트리 렌더링이 완료되기 전에 브라우저가 작업을 방해할 수 없도록 하는 것이다. 하나의 트리가 모두 만들어지면(다음 work 없음) 그 때 한 번에 전체 fiber 트리를 DOM에 집어 넣는다.function doNextWork(fiber) { // ... if (fiber.parent) { fiber.parent.dom.appendChild(fiber.dom); } // ...} 기존에는 doNextWork 함수 내부에서 작업 중간에 parent node가 존재하는 경우 child를 parent에 append 처리 했는데, 이 부분을 제거했다. doNextWo..

const element = ( link to index console.log("click")}> click me... ) React에서 JSX로 위와 같이 작성하면 Babel을 통해 만들어진 결과물을 볼 수 있다. Babel 공식 문서에는 결과물에 대한 예제가 다음과 같이 나와 있다.// inputconst profile = ( {[user.firstName, user.lastName].join(" ")} );// outputimport { jsx as _jsx } from "react/jsx-runtime";import { jsxs as _jsxs } from "react/jsx-runtime";..