└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | # 나만의 React 만들기
2 | https://pomb.us/build-your-own-react/
3 |
4 | 위 블로그 보며 자신만의 리액트 만들어보기
5 |
6 | 학습 흐름에 맞추어 작성하였다.
7 |
8 | ## 0. preview
9 | 리액트의 기본 예시는 다음과 같다.
10 | ``` js
11 | const element = Hello
;
12 | const container = document.getElementById("root");
13 | ReactDom.render(element, container);
14 | ```
15 |
16 | 이를 순수 자바 스크립트 함수로 바꾸면 다음과 같다.
17 | ```js
18 | const element = {
19 | type: "h1",
20 | props: {
21 | title: "foo",
22 | children: "Hello",
23 | },
24 | };
25 | const container = document.getElementById("root");
26 | ```
27 |
28 | jsx는 보통 babel을 통해서 js로 트랜스파일링 된다.
29 |
30 | js로 사용하려면 createElement로 대체 한다. 이 element는 type과 props로 이루어져있다.(사실 더 많은 것이 있지만)
31 |
32 | type은 dom의 타입을 나타내며, 함수가 될 수도 있다.
33 |
34 | props는 jsx의 어트리뷰트로 받은 키와 값들이다.
35 |
36 | children은 자식으로 보통은 또 다른 엘리먼트들의 배열이다.
37 |
38 | 리액트의 render는 react element를 실제 javascript dom으로 바꾸는 함수이다.
39 | ```js
40 | const node = document.createElement(element.type);
41 | node["title"] = element.props.title;
42 |
43 | const text = document.createTextNode("");
44 | text["nodeValue"] = element.props.children;
45 |
46 | node.appendChild(text);
47 | container.appendChild(node);
48 | ```
49 |
50 | ## 1. createElement
51 | 이제 우리만의 React를 만들어보자.
52 |
53 | 먼저 앞서 보았듯이 type, props, children을 갖는 element를 만드는 함수를 만들자.
54 | ```js
55 | function createElement(type, props, ...children) {
56 | return {
57 | type,
58 | props: {
59 | ...props,
60 | children: children.map((child) => {
61 | typeof child == "object" ? child : createTextElement(child);
62 | }),
63 | },
64 | };
65 | }
66 | ```
67 |
68 | children이 원시값일 때를 처리하는 wrap 함수(createTextElement)를 만든다.
69 |
70 | 참고로, 실제 React는 children에 원시값이나 빈 배열을 할당하지는 않는다.
71 | ```js
72 | function createTextElement(text) {
73 | return {
74 | type: "TEXT_ELEMENT",
75 | props: {
76 | nodeValue: text,
77 | children: [],
78 | },
79 | };
80 | }
81 | ```
82 |
83 | 우리 라이브러리의 이름은 myReact 라고 해두자
84 | ```js
85 | const myReact = {
86 | createElement,
87 | };
88 | ```
89 |
90 | element를 생성한다면 다음과 같을 것이다.
91 | ```js
92 | const element = myReact.createElement(
93 | "div",
94 | { id: "foo" },
95 | myReact.createElement("a", null, "bar"),
96 | myReact.createElement("b")
97 | );
98 | ```
99 |
100 | 만약, 우리가 JSX는 계속 쓰고 싶다면,
101 |
102 | babel에게 React의 createElement가 아닌 우리 creataeElement를 쓰라고 다음 커멘트를 달아야한다.
103 | ```js
104 | /** @jsx myReact.createElement */
105 | const element = (
106 |
110 | );
111 | ```
112 |
113 | ## 2. render
114 | 다음은 render 함수를 만들어보자.
115 |
116 | 우선, DOM에 추가하는 코드만 만들고, 차례대로 업데이트, 삭제를 구현할 것이다.
117 |
118 | DOM 노드를 만들고 type을 정하고, container에 추가하는 함수를 만들자.
119 |
120 | 자식들도 재귀적으로 element를 생성해줘야한다.
121 |
122 | Text element에 대한 제외 처리도 해준다.
123 |
124 | 마지막으로, element의 children 외의 props들을 dom 노드에 추가해준다.
125 | ```js
126 | function render(element, container) {
127 | const dom =
128 | element.type == "TEXT_ELEMENT"
129 | ? document.createTextNode("")
130 | : document.createElement(element.type);
131 |
132 | const isPropety = (key) => key !== "children";
133 |
134 | Object.keys(element.props)
135 | .filter(isPropety)
136 | .forEach((name) => {
137 | dom[name] = element.props[name];
138 | });
139 |
140 | element.props.children.forEach((child) => render(child, dom));
141 | container.appendChild(dom);
142 | }
143 | ```
144 |
145 | ## 3. concurrent Mode
146 | 다음 코드를 작성하기 하기전에 짚어야 할게 있다.
147 |
148 | 이전 render 함수의 재귀 코드는 많은 양의 트리를 처리할 때는 오랫동안 블록을 하고 있어서 다른 작업을 할 수가 없다.
149 | ```js
150 | Object.keys(element.props)
151 | .filter(isPropety)
152 | .forEach((name) => {
153 | dom[name] = element.props[name];
154 | });
155 | ```
156 |
157 | 그래서, 이 작업을 작은 단위로 쪼개서 브라우저가 다른 작업이 필요하면 멈출 수 있게 하도록 할 것이다.
158 |
159 | 우리는 requestIdleCallback로 루프를 만들건데, requestIdleCallback은 브라우저가 쓰레드가 작업이 없을 때 실행시키도록 하는 함수이다.
160 |
161 | 실제 React는 이를 더 이상 사용하지 않고 스케쥴러를 사용하지만 우리 대체해서 사용하도록한다. (자세한 내용은 concurrent 모드에 대해 알아보면 좋음)
162 |
163 | 또한, requestIdleCallback은 deadline 파라미터를 제공한다. 이를 통해 브라우저가 다신 제어권을 가져갈때까지 얼마나 남았는지 알 수 있다.
164 |
165 | ```js
166 | function workLoop(deadline) {
167 | let shouldYield = false;
168 | while (nextUnitOfWork && !shouldYield) {
169 | nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
170 | shouldYield = deadline.timeRemaining() < 1;
171 | }
172 | requestIdleCallback(workLoop);
173 | }
174 | ```
175 |
176 | 이 workLoop를 더 완성시켜보자.
177 |
178 | performUnitOfWork는 다음 작업 단위를 리턴하는 함수로, 일단 todo로 남겨놓자.
179 |
180 | ```js
181 | let nextUnitOfWork = null;
182 |
183 | function workLoop(deadline) {
184 | let shouldYield = false;
185 | while (nextUnitOfWork && !shouldYield) {
186 | nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
187 | shouldYield = deadline.timeRemaining() < 1;
188 | }
189 | requestIdleCallback(workLoop);
190 | }
191 |
192 | requestIdleCallback(workLoop);
193 |
194 | function performUnitOfWork(nextUnitOfWork) {
195 | // todo
196 | }
197 | ```
198 |
199 | ## 4. fibers
200 | 이 실행 단위를 관리하기 위한 자료구조가 바로 fiber이다.
201 |
202 | element 마다 fiber를 가지게 되고, 이 fiber는 하나의 실행 단위이다.
203 |
204 | 다음과 같은 html이 있다고하자
205 | ``` js
206 | Didact.render(
207 |
208 |
209 |
210 |
211 |
212 |
213 |