1ํธ์์ React ํต์ฌ ํจํค์ง ๊ฐ์ ์์กด์ฑ๊ณผ ํธ์ถ ๊ด๊ณ๋ฅผ ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ๋ฉฐ ์๊ฐํ์ต๋๋ค. ๊ฐ์๋์๋ 2๊ฐ์ WorkLoop๋ฅผ ๋ณผ ์ ์๋๋ฐ, ๊ฐ๊ฐ scheduler์ react-reconciler ํจํค์ง์ ์์ต๋๋ค. 2ํธ์์๋ ๋ ๋ฃจํ์ ๋ํด์ ์ค๋ช ํ๋ ค๊ณ ํฉ๋๋ค.
์ด ๊ธ์์ ๋ ๋ฃจํ๋ ๊ฐ๊ฐ ์์ ์ค์ผ์ค ๋ฃจํ(Scheduler.js)์ fiber ๊ตฌ์ฑ ๋ฃจํ(ReactFiberWorkLoop.js)๋ผ๊ณ ํํํ๊ฒ ์ต๋๋ค. ์์ธํ ์์ค ์ฝ๋ ๋ถ์์ scheduler์ ์ค์ผ์ค๋ง ๋งค์ปค๋์ฆ๊ณผ fiber ํธ๋ฆฌ ๊ตฌ์ฑ์ ๊ดํ์ฌ ๋ค๋ฃฐ ๋ ์ค๋ช ํ๊ณ , ๊ฑฐ์์ ๊ด์ ์์ ๋ถ์ํ๊ฒ ์ต๋๋ค.

์์ ์ค์ผ์ค ๋ฃจํ๋ React ์ฑ์ด ๋์ํ๊ธฐ ์ํ ํต์ฌ์ ๋๋ค. ๋ฐ๋ณต์ ์ผ๋ก ํธ์ถ๋๋ ๋ชจ๋ ์์ (task)์ ์ค์ผ์ค์ ์ฐ์ ์์์ ๋ฐ๋ผ ์ ์ดํฉ๋๋ค. ์ฐ์ ์์์ ๋ฐ๋ผ expiration time์ด ๊ฒฐ์ ๋๊ณ , ์ด๊ฐ์ ๊ธฐ์ค์ผ๋ก min-heap ์ ๋ ฌ์ด ์ ์ฉ๋ฉ๋๋ค.
fiber ๊ตฌ์ฑ ๋ฃจํ๋ fiber ํธ๋ฆฌ์ ๊ตฌ์ฑ์ ์ ์ดํ๋ฉฐ, ์ ์ฒด ๊ณผ์ ์ DFS(๊น์ด ์ฐ์ ํ์)์ผ๋ก ์ด๋ฃจ์ด์ง๋๋ค.
๊ณตํต์
๋ ๋ฃจํ๋ javaScript ์์ค ์ฝ๋ ์์์ ์คํ ์์ ์์๋ ํด๋ก์ ํํ๋ฅผ ์ ์งํ๊ณ ์์ต๋๋ค. ๋ด๋ถ์ ์ ์๋ ์ ์ญ ๋ณ์๋ค์ ํด๋น Scope์ private ๋ณ์์ด๋ฉฐ ์ฑ ์คํ์ ์ ์ดํ๋ ๋ณ์๋ก ์ฌ์ฉ๋ฉ๋๋ค.
์ฐจ์ด์
์์ ์ค์ผ์ค ๋ฃจํ๋ ์ด์ง ํ ๊ตฌ์กฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ ๋ฃจํธ ๋ ธ๋๋ฅผ ๋ฐ๋ณต ์คํํ๋ค๊ฐ ํ์ด ๋น์์ง ๋๊น์ง ๊ณ์ ์คํํฉ๋๋ค. ์ค์ผ์ค๋ง ๊ธฐ๋ฅ๋ง ํ๋ฉฐ, ๋ด๋ถ callback ํจ์์ ๊ธฐ๋ฅ์ ๋ฌด์์ธ์ง ์์ง ๋ชปํฉ๋๋ค.
fiber ์์ ๋ฃจํ๋ ํธ๋ฆฌ ๊ตฌ์กฐ ๊ธฐ๋ฐ์ ๋๋ค. Root๋ถํฐ DFS ์๊ณ ๋ฆฌ์ฆ์ผ๋ก child - sibling ์์๋ก ๋๊น์ง ํ์ํ๋ฉฐ ์คํํฉ๋๋ค. ์ค์ผ์ค ์ฒดํฌ ๋ฟ๋ง ์๋๋ผ, fiber ํธ๋ฆฌ ๊ตฌ์ฑ๊ณผ DOM ๋ ๋๋ง์ ๊ตฌํ ์ธ๋ถ ์ฌํญ์ ๊ฐ๊น์ด task๋ฅผ ํ ๋นํฉ๋๋ค.
์ฐ๊ด์ฑ
fiber ๊ตฌ์ฑ ๋ฃจํ๋ ์์ ์ค์ผ์ค ๋ฃจํ์์ ์คํ๋๋ task์ ์ผ๋ถ์ ๋๋ค. ๋์ ์ข ์ ๊ด๊ณ์ด๊ณ ๊ฐ ์์ ๋ง๋ค ์๋ก์ด fiber ํธ๋ฆฌ๋ฅผ ๋ค์ ๊ตฌ์ฑํฉ๋๋ค.
์ ์ค๋ช ํ ๋ด์ฉ์ฒ๋ผ ๋ ๊ฐ์ ๋ฃจํ๋ ๋ค์๊ณผ ๊ฐ์ ๋ถ์ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๋๋ค.
์์ ์ค์ผ์ค ๋ฃจํ : task๋ฅผ ์ค์ผ์ค๋ง
fiber ๊ตฌ์ฑ ๋ฃจํ : task์ ์ค์ ์คํ ๋ด๋น.
React ์ฑ์ ์คํ ํ๋ฆ์ ์ ๋ ฅ -> ์ถ๋ ฅ์ผ๋ก ๋ณํํ๋ ๊ณผ์ ์ด ์ ๋ workLoop๋ฅผ ์ค์ฌ์ผ๋ก ์ด๋ฃจ์ด ์ง๋๋ค. ์ด๋ฅผ ๋ค์ ํ๋ฒ ์์๋๋ก ์์ฝํด๋ณด๊ฒ ์ต๋๋ค.
์ ๋ ฅ(Input) : DOM ๋ ธ๋์ ์ ๋ฐ์ดํธ(๋ ธ๋ ์ถ๊ฐ, ์ญ์ , ์์ ๋ฑ)๋ฅผ ๋ชฉํ๋ก ํ๋ "์ ๋ฐ์ดํธ ์๊ตฌ"๋ผ๊ณ ๋ณผ ์ ์์ต๋๋ค.
์์ (Task) ๋ฑ๋ก : react-reconciler๋ "์ ๋ฐ์ดํธ ์๊ตฌ"๋ฅผ ๋ฐ์ผ๋ฉด ์ฆ์ fiber ํธ๋ฆฌ๋ฅผ ๊ตฌ์ฑํ์ง ์๊ณ scheduler์ ์ ์์ (task)๋ฅผ ๋ฑ๋กํฉ๋๋ค. ๊ฐ๋จํ ๋งํด "์ ๋ฐ์ดํธ ์๊ตฌ"๋ฅผ task๋ก ๋ณํํฉ๋๋ค.
์์ (Task) ์คํ : Scheduler๋ ์์ ์ค์ผ์ค ๋ฃจํ๋ฅผ ํตํด task๋ฅผ ์คํํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด task์ callback์ react-reconciler์์ ๋ด์ callback์ด๊ธฐ ๋๋ฌธ์ ๋ค์ react-reconciler๋ก ๋์์ต๋๋ค.
fiber ํธ๋ฆฌ ๊ตฌ์ฑ : fiber ๊ตฌ์ฑ ๋ฃจํ๋ task ์คํ์ ์ผ๋ถ๋ก fiber ํธ๋ฆฌ๋ฅผ ๊ตฌ์ฑํฉ๋๋ค.
commitRoot : task ์คํ์ ์ผ๋ถ๋ก ์ต์ fiber ํธ๋ฆฌ๋ฅผ ์ค์ DOM์ ๋ ๋๋ง ํฉ๋๋ค.
๊ทธ๋ฌ๋ฉด task๊ฐ ์๋ฃ๋ฉ๋๋ค.
์ด๋ ๊ฒ ์ ๋ ฅ -> ์ถ๋ ฅ ๊น์ง ์ ์ฒด ์ฒด์ธ์ด ์ฃผ ์คํ ํ๋ฆ์ ๋๋ค. React๋ ์ด ํ๋ฆ์์ ๋ ๋์ ์ฑ๋ฅ์ ์ํด์ ๋ค์ํ ์ต์ ํ ์ ๋ต(Batch update, Interruptable rendering)์ ๊ตฌํํฉ๋๋ค. ๊ทธ ์ค ํ๋๊ฐ ์์ ์ค์ผ์ค ๋ฃจํ์ fiber ๊ตฌ์ฑ ๋ฃจํ์ ํ์ ๊ตฌ์กฐ๋ก ๊ฐ๋ฅํ ์ค๋จ ๊ฐ๋ฅํ ๋ ๋๋ง ์ ๋๋ค.
์ด๋ฒ ๊ธ์์๋ ๋ workLoop๋ฅผ ๊ฑฐ์์ ์ธ ๊ด์ ์์ ์ค๋ช ํ์ต๋๋ค. ์ด ๋๊ฐ์ ๋ฃจํ๋ฅผ ์ค์ฌ์ผ๋ก React ์ฑ์ ์คํ ํ๋ฆ์ ์์ฝํ ์ ์์๊ณ ์ด ์คํ ํ๋ฆ์ผ๋ก ์ค๋จ ๊ฐ๋ฅํ ๋ ๋๋ง์ด ๊ตฌํ๋ ์ ์์์ ์ค๋ช ํ์ต๋๋ค. react-reconciler์ scheduler ํจํค์ง๋ ์ฝ๋๋์ด ๋ง๊ณ ๋ณต์กํ์ง๋ง ๋ฆฌ์กํธ์ ์ฃผ ์คํ ํ๋ฆ์ ์ง์ํ๋ ํจํค์ง์ด๊ธฐ ๋๋ฌธ์ ํ์ ๋งํ๋ฉด ๋ ์ฝ๊ฒ ํ์ ํ ์ ์์ต๋๋ค.