Amada Coding Club

이 글은 Jser의 How basic hydration works internally in React를 직역한 글입니다. 모두가 React 서버 컴포넌트에 대해 이야기하고 있지만, 그 이야기를 하려면 먼저 한 가지 에피소드를 해야 하므로 오늘은 하이드레이션에 대해 살펴보겠습니다. 1. 첫 번째 렌더링(마운트)에서 DOM 트리가 어떻게 구성되는지 기억해 보겠습니다.React가 초기 마운트를 수행하는 방법에 대해 이야기했는데, 여기에 몇 가지 핵심 사항이 있습니다.1. 백킹 DOM 노드가 필요한 각 파이버 노드는 stateNode라는 이름으로 DOM 노드에 대한 프로퍼티를 가집니다.2. React는 beginWork() 및 completeWork()의 2단계로 각 파이버 노드를 DFS 방식으로 재귀적으로 처..

JSer의 How does useState() work internally in React의 내용을 직역했습니다. React의 useState()에 익숙하실 겁니다. 기본 카운터 앱은 useState()를 통해 컴포넌트에 상태를 추가하는 방법을 보여줍니다. 이번 에피소드에서는 소스코드를 살펴봄으로써 내부적으로 useState()가 어떻게 작동하는지 알아보겠습니다.import { useState } from 'react';export default function App() { const [count, setCount] = useState(0) return ( setCount(count => count + 1)}>click {count} );} 1. useState in init..

Jser의 글 을 직역했습니다.  1. React 스케줄러가 필요한 이유.이 시리즈의 첫 번째 에피소드에서 이미 다룬 바 있는 다음 코드부터 시작하겠습니다.function workLoopSync() { while (workInProgress !== null) { performUnitOfWork(workInProgress); }} 한마디로 React는 내부적으로 파이버 트리의 각 파이버에서 작업하고, workInProgress는 현재 위치를 추적합니다. workLoopSync()는 동기식이고 작업의 중단이 없기 때문에 React는 그냥 while 루프에서 계속 작업하기 때문에 이해하기가 매우 쉽습니다. 동시 모드에서는 상황이 달라집니다. function workLoopConcurrent() { ..

https://jser.dev/2023-07-08-how-does-useeffect-work 의 글을 직역했습니다.useEffect()는 React에서 useState()를 제외하고 가장 많이 사용되는 훅일 수 있습니다. 매우 강력하지만 때때로 혼란스러울 수 있으므로 내부적으로 어떻게 작동하는지 알아봅시다.React.useEffect(() => { //...}[deps]) 1. 초기 마운트에서의 useEffect()useEffect()는 초기 마운트 시 mountEffect()를 사용합니다.function mountEffect( create: () => (() => void) | void, deps: Array | void | null,): void { return mountEffectImpl( ..

다음은 리액트가 리렌더링 될 때 어떤 과정이 일어나는 지에 대한 내용이다. 우선 직역을 해보자React가 초기 마운트를 수행하고 전체 DOM을 처음부터 생성하는 방법에 대해 설명했습니다. 초기 마운트 후 다시 렌더링할 때 React는 재조정 과정을 통해 가능한 한 DOM을 재사용하려고 합니다. 이 에피소드에서는 아래 데모에서 버튼을 클릭한 후 React가 리렌더링할 때 실제로 어떤 일이 일어나는지 알아보겠습니다.<pre id="code_1713..

이번 Mash-Up 14기로 활동하면서 스터디에 참여하게 되었다. 내가 참여한 스터디는 RCDD, React Core Deep Dive 스터디. 즉, 리액트 내부 코드에 대해 깊이 들어가 탐구하는 스터디다. 리액트가 어떻게 작동되고 움직이는 지에 대해 깊숙하게 이해하는데에 목적을 두었다. 이 스터디를 제안해준 형이 찾은 블로그가 있는데 https://jser.dev/series/react-source-code-walkthrough React Internals Deep Dive A live series of JSer deep diving into React internals, by reading the actual React source code. This series helps you understand..