ํ๋ React ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ๋ํ๋ ํ์ ์ ์ธ React Fiber ์ํคํ ์ฒ๋ฅผ ์ฌ์ธต ํ๊ตฌํฉ๋๋ค. React Fiber์ ์ฅ์ , ํต์ฌ ๊ฐ๋ , ๊ทธ๋ฆฌ๊ณ ์ ์ธ๊ณ ๊ฐ๋ฐ์์๊ฒ ๋ฏธ์น๋ ์ํฅ์ ์์๋ณด์ธ์.
React Fiber: ์๋ก์ด ์ํคํ ์ฒ ์ดํดํ๊ธฐ
์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ ์ธ๊ธฐ ์๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ React๋ ์๋ ๊ฐ ์๋นํ ๋ฐ์ ์ ๊ฑฐ๋ญํด์์ต๋๋ค. ๊ฐ์ฅ ์ํฅ๋ ฅ ์๋ ๋ณํ ์ค ํ๋๋ React์ ํต์ฌ ์ฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ์์ ํ ๋ค์ ์์ฑํ React Fiber์ ๋์ ์ด์์ต๋๋ค. ์ด ์๋ก์ด ์ํคํ ์ฒ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ฌ ๋ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ, ํฅ์๋ ์ฑ๋ฅ, ๊ทธ๋ฆฌ๊ณ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ๊ด๋ฆฌ์์ ๋ ํฐ ์ ์ฐ์ฑ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์ด ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ React Fiber์ ํฌ๊ด์ ์ธ ๊ฐ์, ์ฃผ์ ๊ฐ๋ , ๊ทธ๋ฆฌ๊ณ ์ ์ธ๊ณ React ๊ฐ๋ฐ์์๊ฒ ๋ฏธ์น๋ ์ํฅ์ ์ ๊ณตํฉ๋๋ค.
React Fiber๋ ๋ฌด์์ธ๊ฐ์?
๋ณธ์ง์ ์ผ๋ก React Fiber๋ ์ ํ๋ฆฌ์ผ์ด์ UI์ ํ์ฌ ์ํ๋ฅผ ์ํ๋ ์ํ์ ๋น๊ตํ ๋ค์, ๋ณ๊ฒฝ ์ฌํญ์ ๋ฐ์ํ๋๋ก DOM(๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ)์ ์ ๋ฐ์ดํธํ๋ ์ญํ ์ ํ๋ React ์ฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ๊ตฌํ์ ๋๋ค. ์ข ์ข "์คํ ์ฌ์กฐ์ ์"๋ผ๊ณ ๋ถ๋ฆฌ๋ ์๋ ์ฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ๋ณต์กํ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ํ๊ณ๊ฐ ์์์ต๋๋ค. ํนํ ์ฅ๊ธฐ ์คํ ๊ณ์ฐ ๋๋ ๋น๋ฒํ ์ํ ๋ณ๊ฒฝ๊ณผ ๊ด๋ จ๋ ์๋๋ฆฌ์ค์์ ๋์ฑ ๊ทธ๋ฌํ์ต๋๋ค. ์ด๋ฌํ ํ๊ณ๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์๊ณผ ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ก ์ด์ด์ง ์ ์์์ต๋๋ค.
React Fiber๋ ๋น๋๊ธฐ ๋ ๋๋ง ๊ฐ๋ ์ ๋์ ํ์ฌ ์ด๋ฌํ ํ๊ณ๋ฅผ ํด๊ฒฐํฉ๋๋ค. ์ด๋ฅผ ํตํด React๋ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ๋ ์๊ณ ์ค๋จ ๊ฐ๋ฅํ ์์ ๋จ์๋ก ๋ถํดํ ์ ์์ต๋๋ค. ์ด๋ React๊ฐ ์ ๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ์ง์ ํ๊ณ , ์ฌ์ฉ์ ์ํธ ์์ฉ์ ๋ ๋น ๋ฅด๊ฒ ์๋ตํ๋ฉฐ, ๋ ๋ถ๋๋ฝ๊ณ ์ ์ฐํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์๋๋ก ํฉ๋๋ค. ๋ณต์กํ ์์ฌ๋ฅผ ์ค๋นํ๋ ์๋ฆฌ์ฌ๋ฅผ ์์ํด ๋ณด์ธ์. ์ด์ ๋ฐฉ์์ ๊ฐ ์๋ฆฌ๋ฅผ ํ ๋ฒ์ ํ๋์ฉ ์์ฑํ๋ ๊ฒ์ ์๋ฏธํ์ต๋๋ค. Fiber๋ ์๋ฆฌ์ฌ๊ฐ ๋์์ ์ฌ๋ฌ ์๋ฆฌ์ ์์ ๋ถ๋ถ์ ์ค๋นํ๊ณ , ๊ณ ๊ฐ ์์ฒญ์ด๋ ๊ธด๊ธ ์์ ์ ์ ์ํ๊ฒ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ ์ ๋ฉ์ถ๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค.
React Fiber์ ํต์ฌ ๊ฐ๋
React Fiber๋ฅผ ์์ ํ ์ดํดํ๋ ค๋ฉด ๋ค์ ํต์ฌ ๊ฐ๋ ์ ํ์ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
1. ํ์ด๋ฒ(Fibers)
ํ์ด๋ฒ(fiber)๋ React Fiber์ ๊ธฐ๋ณธ ์์ ๋จ์์ ๋๋ค. ์ด๋ React ์ปดํฌ๋ํธ ์ธ์คํด์ค์ ๊ฐ์ ํํ์ ๋ํ๋ ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ ์ปดํฌ๋ํธ์๋ ํด๋น ํ์ด๋ฒ ๋ ธ๋๊ฐ ์์ผ๋ฉฐ, ์ด๋ฅผ ํ์ด๋ฒ ํธ๋ฆฌ๋ผ๊ณ ๋ถ๋ฆฌ๋ ํธ๋ฆฌ์ ๊ฐ์ ๊ตฌ์กฐ๋ฅผ ํ์ฑํฉ๋๋ค. ์ด ํธ๋ฆฌ๋ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ๋ฏธ๋ฌ๋งํ์ง๋ง, React๊ฐ ์ ๋ฐ์ดํธ๋ฅผ ์ถ์ ํ๊ณ , ์ฐ์ ์์๋ฅผ ์ง์ ํ๊ณ , ๊ด๋ฆฌํ๋ ๋ฐ ์ฌ์ฉํ๋ ์ถ๊ฐ ์ ๋ณด๋ฅผ ํฌํจํฉ๋๋ค. ๊ฐ ํ์ด๋ฒ์๋ ๋ค์ ์ ๋ณด๊ฐ ํฌํจ๋ฉ๋๋ค:
- ์ ํ: ์ปดํฌ๋ํธ์ ์ ํ(์: ํจ์ ์ปดํฌ๋ํธ, ํด๋์ค ์ปดํฌ๋ํธ ๋๋ DOM ์์).
- ํค: ํจ์จ์ ์ธ ์ฌ์กฐ์ ์ ์ํด ์ฌ์ฉ๋๋ ์ปดํฌ๋ํธ์ ๊ณ ์ ์๋ณ์.
- ํ๋กญ์ค: ์ปดํฌ๋ํธ์ ์ ๋ฌ๋๋ ๋ฐ์ดํฐ.
- ์ํ: ์ปดํฌ๋ํธ๊ฐ ๊ด๋ฆฌํ๋ ๋ด๋ถ ๋ฐ์ดํฐ.
- ์์: ์ปดํฌ๋ํธ์ ์ฒซ ๋ฒ์งธ ์์์ ๋ํ ํฌ์ธํฐ.
- ํ์ : ์ปดํฌ๋ํธ์ ๋ค์ ํ์ ์ ๋ํ ํฌ์ธํฐ.
- ๋ฐํ: ์ปดํฌ๋ํธ์ ๋ถ๋ชจ์ ๋ํ ํฌ์ธํฐ.
- ์ดํํธ ํ๊ทธ: ์ปดํฌ๋ํธ์์ ์ํํด์ผ ํ๋ ์ ๋ฐ์ดํธ ์ ํ(์: ์ ๋ฐ์ดํธ, ๋ฐฐ์น, ์ญ์ )์ ๋ํ๋ด๋ ํ๋๊ทธ.
2. ์ฌ์กฐ์ (Reconciliation)
์ฌ์กฐ์ (Reconciliation)์ ํ์ฌ ํ์ด๋ฒ ํธ๋ฆฌ์ ์ ํ์ด๋ฒ ํธ๋ฆฌ๋ฅผ ๋น๊ตํ์ฌ DOM์ ์ ์ฉํด์ผ ํ๋ ๋ณ๊ฒฝ ์ฌํญ์ ๊ฒฐ์ ํ๋ ํ๋ก์ธ์ค์ ๋๋ค. React Fiber๋ ๊น์ด ์ฐ์ ํ์ ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉํ์ฌ ํ์ด๋ฒ ํธ๋ฆฌ๋ฅผ ํ์ํ๊ณ ๋ ํธ๋ฆฌ ๊ฐ์ ์ฐจ์ด์ ์ ์๋ณํฉ๋๋ค. ์ด ์๊ณ ๋ฆฌ์ฆ์ UI๋ฅผ ์ ๋ฐ์ดํธํ๋ ๋ฐ ํ์ํ DOM ์์ ์๋ฅผ ์ต์ํํ๋๋ก ์ต์ ํ๋์ด ์์ต๋๋ค.
3. ์ค์ผ์ค๋ง (Scheduling)
์ค์ผ์ค๋ง(Scheduling)์ ์ฌ์กฐ์ ์ค์ ์๋ณ๋ ์ ๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ์ง์ ํ๊ณ ์คํํ๋ ํ๋ก์ธ์ค์ ๋๋ค. React Fiber๋ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ๋ ์๊ณ ์ค๋จ ๊ฐ๋ฅํ ์์ ๋จ์๋ก ๋ถํดํ ์ ์๋ ์ ๊ตํ ์ค์ผ์ค๋ฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฅผ ํตํด React๋ ์ค์๋์ ๋ฐ๋ผ ์ ๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ์ง์ ํ๊ณ , ์ฌ์ฉ์ ์ํธ ์์ฉ์ ๋ ๋น ๋ฅด๊ฒ ์๋ตํ๋ฉฐ, ์ฅ๊ธฐ ์คํ ๊ณ์ฐ์ด ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
์ค์ผ์ค๋ฌ๋ ์ฐ์ ์์ ๊ธฐ๋ฐ ์์คํ ์ ์ฌ์ฉํ์ฌ ์๋ํฉ๋๋ค. ์ ๋ฐ์ดํธ์๋ ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ์ฐ์ ์์๊ฐ ํ ๋น๋ ์ ์์ต๋๋ค:
- ์ฆ์(Immediate): ์ฆ์ ์ ์ฉํด์ผ ํ๋ ์ค์ํ ์ ๋ฐ์ดํธ(์: ์ฌ์ฉ์ ์ ๋ ฅ).
- ์ฌ์ฉ์ ์ฐจ๋จ(User-Blocking): ์ฌ์ฉ์ ์ํธ ์์ฉ์ ์ํด ํธ๋ฆฌ๊ฑฐ๋๋ฉฐ ๊ฐ๋ฅํ ํ ๋นจ๋ฆฌ ์ฒ๋ฆฌ๋์ด์ผ ํ๋ ์ ๋ฐ์ดํธ.
- ์ผ๋ฐ(Normal): ์๊ฒฉํ ํ์ด๋ฐ ์๊ตฌ ์ฌํญ์ด ์๋ ์ผ๋ฐ์ ์ธ ์ ๋ฐ์ดํธ.
- ๋ฎ์(Low): ์ค์๋๊ฐ ๋ฎ๊ณ ํ์ํ ๊ฒฝ์ฐ ์ฐ๊ธฐ๋ ์ ์๋ ์ ๋ฐ์ดํธ.
- ์ ํด(Idle): ๋ธ๋ผ์ฐ์ ๊ฐ ์ ํด ์ํ์ผ ๋ ์ํ๋ ์ ์๋ ์ ๋ฐ์ดํธ.
4. ๋น๋๊ธฐ ๋ ๋๋ง (Asynchronous Rendering)
๋น๋๊ธฐ ๋ ๋๋ง(Asynchronous rendering)์ React Fiber์ ํต์ฌ ํ์ ์ ๋๋ค. ์ด๋ฅผ ํตํด React๋ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ์ผ์ ์ค์งํ๊ณ ๋ค์ ์์ํ ์ ์์ผ๋ฉฐ, ๋ ๋์ ์ฐ์ ์์์ ์ ๋ฐ์ดํธ์ ์ฌ์ฉ์ ์ํธ ์์ฉ์ ๋ ํจ๊ณผ์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์ด๋ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ๋ ์๊ณ ์ค๋จ ๊ฐ๋ฅํ ์์ ๋จ์๋ก ๋ถํดํ๊ณ , ์ฐ์ ์์์ ๋ฐ๋ผ ์ค์ผ์ค๋งํจ์ผ๋ก์จ ๋ฌ์ฑ๋ฉ๋๋ค. React๊ฐ ๋ฎ์ ์ฐ์ ์์ ์์ ์ ์ฒ๋ฆฌํ๋ ๋์ ๋ ๋์ ์ฐ์ ์์ ์ ๋ฐ์ดํธ๊ฐ ๋์ฐฉํ๋ฉด, React๋ ๋ฎ์ ์ฐ์ ์์ ์์ ์ ์ผ์ ์ค์งํ๊ณ , ๋ ๋์ ์ฐ์ ์์ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋ค์, ์ค๋จํ๋ ๋ฎ์ ์ฐ์ ์์ ์์ ์ ๋ค์ ์์ํ ์ ์์ต๋๋ค. ์ด๋ ๋ณต์กํ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๊ฐ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
5. ์ํฌ๋ฃจํ (WorkLoop)
์ํฌ๋ฃจํ(WorkLoop)๋ Fiber ์ํคํ ์ฒ์ ํต์ฌ์ ๋๋ค. ์ด๋ Fiber ํธ๋ฆฌ๋ฅผ ๋ฐ๋ณตํ์ฌ ๊ฐ๋ณ ํ์ด๋ฒ๋ฅผ ์ฒ๋ฆฌํ๊ณ ํ์ํ ์ ๋ฐ์ดํธ๋ฅผ ์ํํ๋ ํจ์์ ๋๋ค. ์ด ๋ฃจํ๋ ๋ชจ๋ ๋ณด๋ฅ ์ค์ธ ์์ ์ด ์๋ฃ๋๊ฑฐ๋ React๊ฐ ๋ ๋์ ์ฐ์ ์์ ์์ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ผ์ ์ค์งํด์ผ ํ ๋๊น์ง ๊ณ์๋ฉ๋๋ค. ์ํฌ๋ฃจํ์ ์ฑ ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ฒ๋ฆฌํ ๋ค์ ํ์ด๋ฒ ์ ํ.
- ์ปดํฌ๋ํธ์ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋ ์คํ.
- ํ์ฌ ๋ฐ ์ ํ์ด๋ฒ ํธ๋ฆฌ ๊ฐ์ ์ฐจ์ด ๊ณ์ฐ.
- DOM ์ ๋ฐ์ดํธ.
React Fiber์ ์ฅ์
React Fiber๋ React ๊ฐ๋ฐ์์ ์ฌ์ฉ์ ๋ชจ๋์๊ฒ ๋ช ๊ฐ์ง ์ค์ํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
1. ํฅ์๋ ์ฑ๋ฅ
๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ๋ ์๊ณ ์ค๋จ ๊ฐ๋ฅํ ์์ ๋จ์๋ก ๋ถํดํจ์ผ๋ก์จ, React Fiber๋ React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํต๋๋ค. ์ด๋ ํนํ ๋น๋ฒํ ์ํ ๋ณ๊ฒฝ์ด๋ ์ฅ๊ธฐ ์คํ ๊ณ์ฐ์ด ์๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋๋๋ฌ์ง๋๋ค. ์ ๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ์ง์ ํ๊ณ ์ฌ์ฉ์ ์ํธ ์์ฉ์ ๋ ๋น ๋ฅด๊ฒ ์๋ตํ๋ ๋ฅ๋ ฅ์ ๋ ๋ถ๋๋ฝ๊ณ ์ ์ฐํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ๋ณต์กํ ์ ํ ๋ชฉ๋ก ํ์ด์ง๊ฐ ์๋ ์ ์ ์๊ฑฐ๋ ์น์ฌ์ดํธ๋ฅผ ์๊ฐํด ๋ณด์ธ์. React Fiber๊ฐ ์์ผ๋ฉด ์ ํ ๋ชฉ๋ก์ ํํฐ๋งํ๊ณ ์ ๋ ฌํ๋ ์์ ์ผ๋ก ์ธํด UI๊ฐ ์๋ตํ์ง ์๊ฒ ๋์ด ์ฌ์ฉ์ ๊ฒฝํ์ ๋ถ๋ง์ ์ด๋ํ ์ ์์ต๋๋ค. React Fiber๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ฌํ ์์ ์ ๋น๋๊ธฐ์ ์ผ๋ก ์ํํ ์ ์์ด UI๊ฐ ๋ฐ์์ฑ์ ์ ์งํ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ์ํํ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
2. ํฅ์๋ ๋ฐ์์ฑ
React Fiber์ ๋น๋๊ธฐ ๋ ๋๋ง ๊ธฐ๋ฅ์ React๊ฐ ์ฌ์ฉ์ ์ํธ ์์ฉ์ ๋ ๋ฐ์์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์๋๋ก ํฉ๋๋ค. ์ฌ์ฉ์ ํ๋์ ์ํด ํธ๋ฆฌ๊ฑฐ๋๋ ์ ๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ์ง์ ํจ์ผ๋ก์จ, React๋ ๋ณต์กํ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋๋ UI๊ฐ ์ํธ ์์ฉ ๊ฐ๋ฅํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ์ด๋ ๋ ๋งค๋ ฅ์ ์ด๊ณ ๋ง์กฑ์ค๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์ฌ๋ฌ ์ฌ์ฉ์๊ฐ ๋์์ ๋ณ๊ฒฝํ๋ ๊ณต๋ ๋ฌธ์ ํธ์ง๊ธฐ๋ฅผ ์์ํด ๋ณด์ธ์. React Fiber๋ฅผ ์ฌ์ฉํ๋ฉด, UI๋ ๋ง์ ๋์ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋๋ ๊ฐ ์ฌ์ฉ์์ ์์ ์ ๋ฐ์์ฑ์ ์ ์งํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ์ง์ฐ์ด๋ ์ง์ฒด ์์ด ์ค์๊ฐ์ผ๋ก ๊ณต๋ ์์ ํ ์ ์์ต๋๋ค.
3. ๋ ํฐ ์ ์ฐ์ฑ
React Fiber๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ๊ด๋ฆฌ์์ ๋ ํฐ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค. ์ ๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ์ง์ ํ๊ณ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํ๋ ๋ฅ๋ ฅ์ ๊ฐ๋ฐ์๊ฐ ํน์ ์ฌ์ฉ ์ฌ๋ก์ ๋ง๊ฒ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ ๋ ์ ๊ตํ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๊ฒ ํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ๋๋์ ์ค์๊ฐ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ๋ฐ์ดํฐ ์๊ฐํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๊ฐํด ๋ณด์ธ์. React Fiber๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๋ ๊ฐ์ฅ ์ค์ํ ๋ฐ์ดํฐ ํฌ์ธํธ์ ๋ ๋๋ง์ ์ฐ์ ์์๋ฅผ ์ง์ ํ์ฌ ์ฌ์ฉ์๊ฐ ๊ฐ์ฅ ๊ด๋ จ์ฑ ์๋ ์ ๋ณด๋ฅผ ๋จผ์ ๋ณผ ์ ์๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ๋ํ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ํด ์ํ์ผ ๋๊น์ง ์ค์๋๊ฐ ๋ฎ์ ๋ฐ์ดํฐ ํฌ์ธํธ์ ๋ ๋๋ง์ ์ฐ๊ธฐํ์ฌ ์ฑ๋ฅ์ ๋์ฑ ํฅ์์ํฌ ์ ์์ต๋๋ค.
4. UI ๋์์ธ์ ์๋ก์ด ๊ฐ๋ฅ์ฑ
React Fiber๋ UI ๋์์ธ์ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค. ๋น๋๊ธฐ ๋ ๋๋ง์ ์ํํ๊ณ ์ ๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ์ง์ ํ๋ ๋ฅ๋ ฅ์ ๊ฐ๋ฐ์๊ฐ ์ฑ๋ฅ ์ ํ ์์ด ๋ ๋ณต์กํ๊ณ ๋์ ์ธ UI๋ฅผ ๋ง๋ค ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ ๋ ๋งค๋ ฅ์ ์ด๊ณ ๋ชฐ์ ๊ฐ ์๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค ์ ์๊ฒ ํฉ๋๋ค.
์ฆ์ ๊ฒ์ ์ํ ์ ๋ฐ์ดํธ๊ฐ ํ์ํ ๊ฒ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๊ฐํด ๋ณด์ธ์. React Fiber๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๋ ํ๋ ์ด์ด ์บ๋ฆญํฐ์ ์ ์บ๋ฆญํฐ์ ๊ฐ์ ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ์์์ ๋ ๋๋ง์ ์ฐ์ ์์๋ฅผ ์ง์ ํ์ฌ, ๋ง์ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋๋ ๊ฒ์์ด ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ๋ํ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ํด ์ํ์ผ ๋๊น์ง ๋ฐฐ๊ฒฝ ๊ฒฝ์น์ ๊ฐ์ ์ค์๋๊ฐ ๋ฎ์ ๊ฒ์ ์์์ ๋ ๋๋ง์ ์ฐ๊ธฐํ์ฌ ์ฑ๋ฅ์ ๋์ฑ ํฅ์์ํฌ ์ ์์ต๋๋ค.
React ๊ฐ๋ฐ์๋ฅผ ์ํ ์์ฌ์
React Fiber๋ ์ฃผ๋ก ๊ตฌํ ์ธ๋ถ ์ฌํญ์ด์ง๋ง, React ๊ฐ๋ฐ์์๊ฒ ๋ช ๊ฐ์ง ์์ฌ์ ์ด ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ฃผ์ ๊ณ ๋ ค ์ฌํญ์ ๋๋ค:
1. ๋์์ฑ ๋ชจ๋(Concurrent Mode) ์ดํดํ๊ธฐ
React Fiber๋ React๊ฐ ๋น๋๊ธฐ ๋ ๋๋ง์ ๋ ํจ๊ณผ์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์๋๋ก ํ๋ ์๋ก์ด ๊ธฐ๋ฅ ์ธํธ์ธ ๋์์ฑ ๋ชจ๋(Concurrent Mode)๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๋์์ฑ ๋ชจ๋๋ ๊ฐ๋ฐ์๊ฐ ์์งํด์ผ ํ ์๋ก์ด API์ ๊ฐ๋ ์ ๋์ ํฉ๋๋ค. ์๋ฅผ ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- Suspense: ๋ฐ์ดํฐ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํด์ง ๋๊น์ง ์ปดํฌ๋ํธ ๋ ๋๋ง์ ์ผ์ ์ค๋จํ๋ ๋ฉ์ปค๋์ฆ.
- Transitions: ์ค์๋๊ฐ ๋ฎ๊ณ ํ์ํ ๊ฒฝ์ฐ ์ฐ๊ธฐ๋ ์ ์๋ ์ ๋ฐ์ดํธ๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ.
- useDeferredValue: UI์ ์ผ๋ถ ์ ๋ฐ์ดํธ๋ฅผ ์ฐ๊ธฐํ ์ ์๋๋ก ํ๋ ํ .
- useTransition: ์ ๋ฐ์ดํธ๋ฅผ ์ ํ์ผ๋ก ํ์ํ ์ ์๋๋ก ํ๋ ํ .
์ด๋ฌํ API์ ๊ฐ๋ ์ ์ดํดํ๋ ๊ฒ์ React Fiber์ ๊ธฐ๋ฅ์ ์ต๋ํ ํ์ฉํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
2. ์ค๋ฅ ๊ฒฝ๊ณ (Error Boundaries)
๋น๋๊ธฐ ๋ ๋๋ง์์๋ ๋ ๋๋ง ํ๋ก์ธ์ค์ ์ฌ๋ฌ ์ง์ ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ค๋ฅ ๊ฒฝ๊ณ(Error boundaries)๋ ๋ ๋๋ง ์ค์ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด๊ฐ ์ถฉ๋ํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํ ๋ฉ์ปค๋์ฆ์ ๋๋ค. ๊ฐ๋ฐ์๋ ์ค๋ฅ๋ฅผ ์ฐ์ํ๊ฒ ์ฒ๋ฆฌํ๊ณ ์ฌ์ฉ์์๊ฒ ๋์ฒด UI๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ์ธ๋ถ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ์ปดํฌ๋ํธ๋ฅผ ์์ํด ๋ณด์ธ์. API ํธ์ถ์ด ์คํจํ๋ฉด ์ปดํฌ๋ํธ๊ฐ ์ค๋ฅ๋ฅผ ๋ฐ์์ํฌ ์ ์์ต๋๋ค. ์ปดํฌ๋ํธ๋ฅผ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ธ๋ฉด ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ๋ฐ์ดํฐ ๋ก๋์ ์คํจํ์์ ๋ํ๋ด๋ ๋ฉ์์ง๋ฅผ ์ฌ์ฉ์์๊ฒ ํ์ํ ์ ์์ต๋๋ค.
3. ํจ๊ณผ ๋ฐ ๋ถ์์ฉ (Effects and Side Effects)
๋น๋๊ธฐ ๋ ๋๋ง์ ์ฌ์ฉํ ๋ ํจ๊ณผ์ ๋ถ์์ฉ์ ์ ์ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ํจ๊ณผ๋ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋ ํ์ ์คํ๋๋๋ก ๋ณด์ฅํ๋ useEffect ํ
์์ ์ํ๋์ด์ผ ํฉ๋๋ค. ๋ํ React ์ธ๋ถ์์ ์ง์ DOM์ ์กฐ์ํ๋ ๊ฒ๊ณผ ๊ฐ์ด ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ๋ฐฉํดํ ์ ์๋ ๋ถ์์ฉ์ ํผํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
๋ ๋๋ง๋ ํ ๋ฌธ์ ์ ๋ชฉ์ ์
๋ฐ์ดํธํด์ผ ํ๋ ์ปดํฌ๋ํธ๋ฅผ ์๊ฐํด ๋ณด์ธ์. ์ปดํฌ๋ํธ์ ๋ ๋ ํจ์ ๋ด์์ ์ง์ ๋ฌธ์ ์ ๋ชฉ์ ์ค์ ํ๋ ๋์ , useEffect ํ
์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋ ํ์ ์ ๋ชฉ์ ์
๋ฐ์ดํธํด์ผ ํฉ๋๋ค. ์ด๋ ๋น๋๊ธฐ ๋ ๋๋ง์ ์ฌ์ฉํ ๋๋ ์ ๋ชฉ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์
๋ฐ์ดํธ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
4. ์ฐจ๋จ ์์ ํผํ๊ธฐ (Avoiding Blocking Operations)
React Fiber์ ๋น๋๊ธฐ ๋ ๋๋ง ๊ธฐ๋ฅ์ ์ต๋ํ ํ์ฉํ๋ ค๋ฉด ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ ์ ์๋ ์ฐจ๋จ ์์ ์ ํผํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์ฅ๊ธฐ ์คํ ๊ณ์ฐ, ๋๊ธฐ์ API ํธ์ถ ๋ฐ ๊ณผ๋ํ DOM ์กฐ์์ด ํฌํจ๋ฉ๋๋ค. ๋์ ๊ฐ๋ฐ์๋ Web Workers ๋๋ ๋น๋๊ธฐ API ํธ์ถ๊ณผ ๊ฐ์ ๋น๋๊ธฐ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ์์ ์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ํํด์ผ ํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ๋ฉ์ธ ์ค๋ ๋์์ ๋ณต์กํ ๊ณ์ฐ์ ์ํํ๋ ๋์ Web Worker๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๋์ ์ค๋ ๋์์ ๊ณ์ฐ์ ์ํํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๊ณ์ฐ์ด ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ UI๊ฐ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
React Fiber๊ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์๋ ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ์์์ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
1. ๋ฐ์ดํฐ ์ง์ฝ์ ์ ํ๋ฆฌ์ผ์ด์ (Data-Intensive Applications)
๋๋์ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ์ ํ๋ฆฌ์ผ์ด์ (์: ๋์๋ณด๋, ๋ฐ์ดํฐ ์๊ฐํ ๋๊ตฌ, ์ ์ ์๊ฑฐ๋ ์น์ฌ์ดํธ)์ React Fiber์ ํฅ์๋ ์ฑ๋ฅ๊ณผ ๋ฐ์์ฑ์ผ๋ก๋ถํฐ ํฐ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค. ๊ฐ์ฅ ์ค์ํ ๋ฐ์ดํฐ ํฌ์ธํธ์ ๋ ๋๋ง์ ์ฐ์ ์์๋ฅผ ์ง์ ํ๊ณ ์ค์๋๊ฐ ๋ฎ์ ๋ฐ์ดํฐ ํฌ์ธํธ์ ๋ ๋๋ง์ ์ฐ๊ธฐํจ์ผ๋ก์จ, ๊ฐ๋ฐ์๋ ์ฌ์ฉ์๊ฐ ๊ฐ์ฅ ๊ด๋ จ์ฑ ์๋ ์ ๋ณด๋ฅผ ๋จผ์ ๋ณด๊ณ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ ๋๋ UI๊ฐ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ์ค์๊ฐ ์ฃผ๊ฐ๋ฅผ ํ์ํ๋ ๊ธ์ต ๋์๋ณด๋๋ React Fiber๋ฅผ ์ฌ์ฉํ์ฌ ํ์ฌ ์ฃผ๊ฐ ๋ ๋๋ง์ ์ฐ์ ์์๋ฅผ ์ง์ ํ๊ณ ๊ณผ๊ฑฐ ์ฃผ๊ฐ ๋ ๋๋ง์ ์ฐ๊ธฐํ ์ ์์ต๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ๊ฐ์ฅ ์ต์ ์ ๋ณด๋ฅผ ๋ณผ ์ ์๊ณ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ ๋๋ ๋์๋ณด๋๊ฐ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
2. ๋ํํ UI (Interactive UIs)
๊ฒ์, ์๋ฎฌ๋ ์ด์ , ๊ณต๋ ํธ์ง๊ธฐ์ ๊ฐ์ ๋ณต์กํ ๋ํํ UI๋ฅผ ๊ฐ์ง ์ ํ๋ฆฌ์ผ์ด์ ์ React Fiber์ ํฅ์๋ ๋ฐ์์ฑ์ผ๋ก๋ถํฐ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค. ์ฌ์ฉ์ ์์ ์ ์ํด ํธ๋ฆฌ๊ฑฐ๋๋ ์ ๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ์ง์ ํจ์ผ๋ก์จ, ๊ฐ๋ฐ์๋ ๋ง์ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋๋ UI๊ฐ ์ํธ ์์ฉ ๊ฐ๋ฅํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
ํ๋ ์ด์ด๋ค์ด ์ ๋์ ๋์์์ด ๋ช ๋ น์ ๋ด๋ฆฌ๋ ์ค์๊ฐ ์ ๋ต ๊ฒ์์ ์์ํด ๋ณด์ธ์. React Fiber๋ฅผ ์ฌ์ฉํ๋ฉด, UI๋ ๋ง์ ๋์ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋๋ ๊ฐ ํ๋ ์ด์ด์ ์์ ์ ๋ฐ์์ฑ์ ์ ์งํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ํ๋ ์ด์ด๋ ์ง์ฐ์ด๋ ์ง์ฒด ์์ด ์ค์๊ฐ์ผ๋ก ์ ๋์ ์ ์ดํ ์ ์์ต๋๋ค.
3. ์ ๋๋ฉ์ด์ ์ด ์๋ ์ ํ๋ฆฌ์ผ์ด์ (Applications with Animations)
์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ React Fiber์ ๋น๋๊ธฐ ๋ ๋๋ง ๊ธฐ๋ฅ์ผ๋ก๋ถํฐ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค. ์ ๋๋ฉ์ด์ ํ๋ก์ธ์ค๋ฅผ ๋ ์๊ณ ์ค๋จ ๊ฐ๋ฅํ ์์ ๋จ์๋ก ๋ถํดํจ์ผ๋ก์จ, ๊ฐ๋ฐ์๋ ์ ๋๋ฉ์ด์ ์ด ๋ถ๋๋ฝ๊ฒ ์คํ๋๊ณ ์ ๋๋ฉ์ด์ ์ด ๋ณต์กํ ๋๋ UI๊ฐ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ๋ณต์กํ ํ์ด์ง ์ ํ ์ ๋๋ฉ์ด์ ์ด ์๋ ์น์ฌ์ดํธ๋ React Fiber๋ฅผ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์ ์ด ๋ถ๋๋ฝ๊ฒ ์คํ๋๊ณ ์ ํ ์ค์ ์ฌ์ฉ์๊ฐ ์ง์ฐ์ด๋ ์ง์ฒด๋ฅผ ๊ฒฝํํ์ง ์๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
4. ์ฝ๋ ์คํ๋ฆฌํ ๋ฐ ์ง์ฐ ๋ก๋ฉ (Code Splitting and Lazy Loading)
React Fiber๋ ์ฝ๋ ์คํ๋ฆฌํ
๋ฐ ์ง์ฐ ๋ก๋ฉ ๊ธฐ์ ๊ณผ ์ํํ๊ฒ ํตํฉ๋ฉ๋๋ค. React.lazy์ Suspense๋ฅผ ์ฌ์ฉํ๋ฉด ํ์์ ๋ฐ๋ผ ์ปดํฌ๋ํธ๋ฅผ ๋ก๋ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์
์ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ๊ฐ์ ํ ์ ์์ต๋๋ค. Fiber๋ ๋ก๋ฉ ํ์๊ธฐ์ ๋์ฒด UI๊ฐ ๋ถ๋๋ฝ๊ฒ ํ์๋๊ณ ๋ก๋๋ ์ปดํฌ๋ํธ๊ฐ ํจ์จ์ ์ผ๋ก ๋ ๋๋ง๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
React Fiber ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
React Fiber๋ฅผ ์ต๋ํ ํ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ๋์์ฑ ๋ชจ๋ ์ฌ์ฉ: React Fiber์ ๋น๋๊ธฐ ๋ ๋๋ง ๊ธฐ๋ฅ์ ์ ์ฌ๋ ฅ์ ์ต๋ํ ํ์ฉํ๋ ค๋ฉด ๋์์ฑ ๋ชจ๋๋ฅผ ํ์ฑํํ์ญ์์ค.
- ์ค๋ฅ ๊ฒฝ๊ณ ๊ตฌํ: ์ค๋ฅ๋ฅผ ์ฐ์ํ๊ฒ ์ฒ๋ฆฌํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด๊ฐ ์ถฉ๋ํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ์ฌ์ฉํ์ญ์์ค.
- ํจ๊ณผ ์ต์ ํ:
useEffectํ ์ ์ฌ์ฉํ์ฌ ํจ๊ณผ์ ๋ถ์์ฉ์ ๊ด๋ฆฌํ๊ณ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ๋ฐฉํดํ ์ ์๋ ๋ถ์์ฉ์ ํผํ์ญ์์ค. - ์ฐจ๋จ ์์ ํผํ๊ธฐ: ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ ์ ์๋ ์ฐจ๋จ ์์ ์ ํผํ๊ธฐ ์ํด ๋น๋๊ธฐ ๊ธฐ์ ์ ์ฌ์ฉํ์ญ์์ค.
- ์ ํ๋ฆฌ์ผ์ด์ ํ๋กํ์ผ๋ง: React์ ํ๋กํ์ผ๋ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์ฝ๋์ ๋ฐ๋ผ ์ต์ ํํ์ญ์์ค.
๊ธ๋ก๋ฒ ๋งฅ๋ฝ์์ React Fiber
React Fiber์ ์ด์ ์ ์ง๋ฆฌ์ ์์น๋ ๋ฌธํ์ ๋งฅ๋ฝ์ ๊ด๊ณ์์ด ๋ณดํธ์ ์ผ๋ก ์ ์ฉ๋ฉ๋๋ค. ์ฑ๋ฅ, ๋ฐ์์ฑ ๋ฐ ์ ์ฐ์ฑ์ ๊ฐ์ ์ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ํํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์ ์ธ๊ณ์ ๋ค์ํ ์ฌ์ฉ์๋ฅผ ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ๋, ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ, ์ฅ์น ๊ธฐ๋ฅ ๋ฐ ์ง์ญ ์ ํธ๋์ ๊ฐ์ ์์๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. React Fiber๋ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํ๊ณ ์ด์์ ์ด์ง ์์ ์กฐ๊ฑด์์๋ UI๊ฐ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋ณด์ฅํจ์ผ๋ก์จ ์ด๋ฌํ ๋ฌธ์ ์ค ์ผ๋ถ๋ฅผ ์ํํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ์ธํฐ๋ท ์ฐ๊ฒฐ ์๋๊ฐ ๋๋ฆฐ ์ง์ญ์์ React Fiber์ ๋น๋๊ธฐ ๋ ๋๋ง ๊ธฐ๋ฅ์ UI๊ฐ ๋น ๋ฅด๊ฒ ๋ก๋๋๊ณ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋์ ํด๋น ์ง์ญ ์ฌ์ฉ์์๊ฒ ๋ ๋์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ์ ์ฌํ๊ฒ, ๊ด๋ฒ์ํ ์ฅ์น ๊ธฐ๋ฅ์ ๊ฐ์ง ์ง์ญ์์ React Fiber์ ์ ๋ฐ์ดํธ ์ฐ์ ์์ ์ง์ ๋ฐ ๋น๋๊ธฐ ์์ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ ๊ณ ๊ธ ์ค๋งํธํฐ๋ถํฐ ์ ๊ฐํ ํผ์ฒํฐ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํ ์ฅ์น์์ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ํํ๊ฒ ์คํ๋๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
React Fiber๋ React ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ตฌ์ถ๋๊ณ ๋ ๋๋ง๋๋ ๋ฐฉ์์ ๋ณํ์ํจ ํ์ ์ ์ธ ์ํคํ ์ฒ์ ๋๋ค. ๋น๋๊ธฐ ๋ ๋๋ง๊ณผ ์ ๊ตํ ์ค์ผ์ค๋ง ์๊ณ ๋ฆฌ์ฆ์ ๋์ ํจ์ผ๋ก์จ, React Fiber๋ ๋ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ, ํฅ์๋ ์ฑ๋ฅ, ๊ทธ๋ฆฌ๊ณ ๋ ํฐ ์ ์ฐ์ฑ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ๋น๋ก ์๋ก์ด ๊ฐ๋ ๊ณผ API๋ฅผ ๋์ ํ์ง๋ง, React Fiber๋ฅผ ์ดํดํ๋ ๊ฒ์ ํ๋์ ์ด๊ณ , ์ฑ๋ฅ์ด ๋ฐ์ด๋๋ฉฐ, ํ์ฅ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ณ ์ ํ๋ ๋ชจ๋ React ๊ฐ๋ฐ์์๊ฒ ์ค์ํฉ๋๋ค. React Fiber์ ๊ด๋ จ ๊ธฐ๋ฅ์ ์์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ํ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ณ React๋ก ๊ฐ๋ฅํ ๊ฒ์ ๊ฒฝ๊ณ๋ฅผ ๋ํ ์ ์์ต๋๋ค.