React์ ์คํ์ API์ธ experimental_Offscreen์ ํตํด ๋ฐฑ๊ทธ๋ผ์ด๋ ์ปดํฌ๋ํธ ๋ ๋๋ง์ผ๋ก ์ฑ๋ฅ๊ณผ ๋ฐ์์ฑ์ ํฅ์์ํค์ธ์. ๋ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ํ ์ค์ ๊ตฌํ๊ณผ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์์๋ณด์ธ์.
React experimental_Offscreen: ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ปดํฌ๋ํธ ๋ ๋๋ง ๋ง์คํฐํ๊ธฐ
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์, ๋งค๋๋ฝ๊ณ ๋ฐ์์ฑ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ ์ ๋์ ์ธ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ React๋ ์ฑ๋ฅ ์ต์ ํ์ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ ํฅ์์ ๋ชฉํ๋ก ํ๋ ๊ธฐ๋ฅ๋ค์ ์ง์์ ์ผ๋ก ๋์
ํ๊ณ ์์ต๋๋ค. ํ์ฌ ์คํ์ ์ธ ๊ธฐ๋ฅ ์ค ํ๋๊ฐ ๋ฐ๋ก experimental_Offscreen API์
๋๋ค. ์ด ๊ฐ๋ ฅํ ๋๊ตฌ๋ ๊ฐ๋ฐ์๊ฐ ์ปดํฌ๋ํธ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ ๋๋งํ ์ ์๊ฒ ํ์ฌ, ์ฒด๊ฐ ์ฑ๋ฅ์ ๊ฐ์ ํ๊ณ ๋ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค์ด๋
๋๋ค. ์ด ์ข
ํฉ ๊ฐ์ด๋์์๋ experimental_Offscreen์ ๋ณต์กํ ๋ถ๋ถ์ ๊น์ด ํ๊ณ ๋ค์ด ๊ทธ ์ด์ , ์ฌ์ฉ ์ฌ๋ก ๋ฐ ๊ตฌํ ์ธ๋ถ ์ฌํญ์ ํ์ํ ๊ฒ์
๋๋ค.
React experimental_Offscreen์ด๋ ๋ฌด์์ธ๊ฐ?
experimental_Offscreen API๋ React์ ์คํ์ ์ธ ๊ธฐ๋ฅ์ผ๋ก, ์ปดํฌ๋ํธ๋ฅผ ์คํ์คํฌ๋ฆฐ(off-screen), ์ฆ ์ฌ์ฉ์์๊ฒ ์ฆ์ ๋ณด์ด์ง ์๋ ๊ณณ์์ ๋ ๋๋งํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋น์ฉ์ด ๋ง์ด ๋๋ ๋ ๋๋ง ์์
์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ํํ์ฌ ์ปดํฌ๋ํธ๊ฐ ํ์ํด์ง๊ธฐ ์ ์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ปดํฌ๋ํธ๊ฐ ๋ง์นจ๋ด ํ์๋ ๋, ๋น ๋ฅด๊ณ ์ํํ๊ฒ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ํตํฉ๋ ์ ์์ด ์ฒด๊ฐ ๋ก๋ฉ ์๊ฐ์ ์ค์ด๊ณ ๋ฐ์์ฑ์ ํฅ์์ํต๋๋ค.
์ฝํ ์ธ ๋ฅผ ๋ฏธ๋ฆฌ ๋ก๋ํ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์ด๋ค ์ปดํฌ๋ํธ๋ก ์ด๋ํ์ ๋ ๋ ๋๋ง๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๋์ , ๋ ๋๋ง์ด ์ด๋ฏธ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์๋ฃ๋ ์ํ์ ๋๋ค. ์ด๋ ํนํ ๋ฆฌ์์ค๊ฐ ์ ํ๋ ์ฅ์น๋ ๊ณ์ฐ ์ง์ฝ์ ์ธ ๋ ๋๋ง์ด ํ์ํ ์ปดํฌ๋ํธ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน์ ์ผ๋ก ๊ฐ์ ํฉ๋๋ค.
experimental_Offscreen ์ฌ์ฉ์ ์ฃผ์ ์ด์ :
- ํฅ์๋ ์ฒด๊ฐ ์ฑ๋ฅ: ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ปดํฌ๋ํธ๋ฅผ ๋ฏธ๋ฆฌ ๋ ๋๋งํจ์ผ๋ก์จ,
experimental_Offscreen์ ํด๋น ์ปดํฌ๋ํธ๋ค์ด ๋ง์นจ๋ด ํ์๋ ๋์ ์ฒด๊ฐ ๋ก๋ฉ ์๊ฐ์ ์ค์ฌ์ค๋๋ค. ์ฌ์ฉ์๋ ๋ ๋ฐ์์ฑ ์๊ณ ์ ์ฐํ ์ธํฐํ์ด์ค๋ฅผ ๊ฒฝํํ๊ฒ ๋ฉ๋๋ค. - ๋ก๋ฉ ์๊ฐ ๊ฐ์: ์ปดํฌ๋ํธ๊ฐ ๋ณด์ด๊ฒ ๋ ๋ ๋ ๋๋ง๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๋์ , ์ด๋ฏธ ๋ ๋๋ง๋์ด ํ์๋ ์ค๋น๊ฐ ๋์ด ์์ต๋๋ค. ์ด๋ ์ค์ ๋ก๋ฉ ์๊ฐ์ ํฌ๊ฒ ๋จ์ถ์ํต๋๋ค.
- ํฅ์๋ ๋ฐ์์ฑ: ๋ฐฑ๊ทธ๋ผ์ด๋ ๋ ๋๋ง์ ๋ฉ์ธ ์ค๋ ๋๊ฐ ์ฌ์ฉ์ ์ํธ์์ฉ ์ฒ๋ฆฌ์ ๊ฐ์ ๋ค๋ฅธ ์์ ์ ์ํด ์ฌ์ ๋ฅผ ๊ฐ์ง ์ ์๊ฒ ํฉ๋๋ค. ์ด๋ ํนํ ๋ณต์กํ ๋ ๋๋ง ์์ ์ค์ UI๊ฐ ๋ฐ์ํ์ง ์๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
- ๋ ๋์ ๋ฆฌ์์ค ํ์ฉ: ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํจ์ผ๋ก์จ,
experimental_Offscreen์ ์์ ๋ถํ๋ฅผ ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ผ ๋ถ์ฐ์์ผ ์ฑ๋ฅ ๊ธ์ฆ์ ๋ฐฉ์งํ๊ณ ์ ๋ฐ์ ์ธ ๋ฆฌ์์ค ํ์ฉ๋๋ฅผ ๊ฐ์ ํฉ๋๋ค. - ๋จ์ํ๋ ์ฝ๋: ๋ง์ ๊ฒฝ์ฐ,
experimental_Offscreen์ ์ฌ์ฉํ๋ฉด ๋ ๋๋ง์ ์ ๋์ ์ผ๋ก ํ์ํ ๋๊น์ง ์ง์ฐ์ํฌ ์ ์์ผ๋ฏ๋ก ๋ณต์กํ ๋ ๋๋ง ๋ก์ง์ ๋จ์ํํ ์ ์์ต๋๋ค.
experimental_Offscreen์ ์ฌ์ฉ ์ฌ๋ก
experimental_Offscreen์ React ์ ํ๋ฆฌ์ผ์ด์
์ ์ต์ ํํ๊ธฐ ์ํด ๋ค์ํ ์๋๋ฆฌ์ค์ ์ ์ฉ๋ ์ ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก์
๋๋ค:
1. ํญ ์ธํฐํ์ด์ค
ํญ ์ธํฐํ์ด์ค์์ ์ฌ์ฉ์๋ ์ผ๋ฐ์ ์ผ๋ก ๋ค๋ฅธ ํญ ์ฌ์ด๋ฅผ ์ ํํ์ฌ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ค์ํ ์น์
์ ์ ๊ทผํฉ๋๋ค. experimental_Offscreen์ ์ฌ์ฉํ๋ฉด ๋นํ์ฑ ํญ์ ์ฝํ
์ธ ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ฉ์๊ฐ ์ ํญ์ผ๋ก ์ ํํ ๋ ์ฝํ
์ธ ๊ฐ ์ด๋ฏธ ๋ ๋๋ง๋์ด ์ฆ์ ํ์๋ ์ค๋น๊ฐ ๋์ด ์์ด ๋งค๋๋ฌ์ด ์ ํ์ ์ ๊ณตํฉ๋๋ค.
์์: ์ ํ ์์ธ ์ ๋ณด, ๋ฆฌ๋ทฐ, ๋ฐฐ์ก ์ ๋ณด๊ฐ ๋ณ๋์ ํญ์ ํ์๋๋ ์ ์ ์๊ฑฐ๋ ์น์ฌ์ดํธ๋ฅผ ์๊ฐํด๋ณด์ธ์. experimental_Offscreen์ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ์ ํ ์์ธ ์ ๋ณด ํญ์ ๋ณด๊ณ ์๋ ๋์ ๋ฆฌ๋ทฐ ๋ฐ ๋ฐฐ์ก ์ ๋ณด ํญ์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ๋ฆฌ๋ทฐ๋ ๋ฐฐ์ก ์ ๋ณด ํญ์ ํด๋ฆญํ๋ฉด ์ฝํ
์ธ ๊ฐ ์ด๋ฏธ ์ค๋น๋์ด ์์ด ๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ ์ข์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
2. ๊ธด ๋ชฉ๋ก๊ณผ ๊ฐ์ํ๋ ๋ชฉ๋ก
๊ธด ๋ฐ์ดํฐ ๋ชฉ๋ก์ ๋ค๋ฃฐ ๋, ๋ชจ๋ ํญ๋ชฉ์ ํ ๋ฒ์ ๋ ๋๋งํ๋ ๊ฒ์ ์ฑ๋ฅ์ ๋ถ๋ด์ ์ค ์ ์์ต๋๋ค. ๊ฐ์ํ๋ ๋ชฉ๋ก์ ํ์ฌ ํ๋ฉด์ ๋ณด์ด๋ ํญ๋ชฉ๋ง ๋ ๋๋งํ๋ ์ผ๋ฐ์ ์ธ ๊ธฐ์ ์
๋๋ค. experimental_Offscreen์ ๊ฐ์ํ๋ ๋ชฉ๋ก๊ณผ ํจ๊ป ์ฌ์ฉ๋์ด ๊ณง ์์ผ์ ๋ค์ด์ฌ ํญ๋ชฉ์ ๋ฏธ๋ฆฌ ๋ ๋๋งํจ์ผ๋ก์จ ๋ ๋ถ๋๋ฌ์ด ์คํฌ๋กค ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
์์: ์์ฒ ๊ฐ์ ๊ฒ์๋ฌผ์ด ์๋ ์์
๋ฏธ๋์ด ํผ๋๋ฅผ ์์ํด๋ณด์ธ์. experimental_Offscreen์ ์ฌ์ฉํ๋ฉด ํ์ฌ ๋ทฐํฌํธ ๋ฐ๋ก ์๋์ ์๋ ๊ฒ์๋ฌผ๋ค์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ์๋๋ก ์คํฌ๋กคํ๋ฉด, ๋ฏธ๋ฆฌ ๋ ๋๋ง๋ ์ด ๊ฒ์๋ฌผ๋ค์ด ์ํํ๊ฒ ๋ํ๋ ์ ์ฐํ๊ณ ์ค๋จ ์๋ ์คํฌ๋กค ๊ฒฝํ์ ๋ง๋ค์ด๋
๋๋ค. ์ด๋ ํนํ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ด ์ ํ๋ ๋ชจ๋ฐ์ผ ์ฅ์น์์ ์ค์ํฉ๋๋ค.
3. ๋ณต์กํ ์์
์๋ง์ ํ๋, ์ ํจ์ฑ ๊ฒ์ฌ, ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ด ์๋ ์์์ ํนํ ์ ์ฌ์ ์ฅ์น์์ ๋ ๋๋ง์ด ๋๋ฆด ์ ์์ต๋๋ค. experimental_Offscreen์ ์ฌ์ฉํ๋ฉด ์ฆ์ ๋ณด์ด์ง ์๊ฑฐ๋ ์ฌ์ฉ์ ์
๋ ฅ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ ์์์ ์ผ๋ถ๋ฅผ ๋ฏธ๋ฆฌ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ด๋ ์์์ ์ฒด๊ฐ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์์: ๋์ถ์ ์ํ ๋ค๋จ๊ณ ์ ์ฒญ์๋ฅผ ์๊ฐํด๋ณด์ธ์. ์ด๊ธฐ ๋จ๊ณ์ ๊ธฐ๋ฐํ ๋ ๋ณต์กํ ๊ณ์ฐ๊ณผ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ด ํ์ํ ์์์ ํ๋ฐ ๋จ๊ณ๋ฅผ experimental_Offscreen์ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ฉ์๊ฐ ํ๋ฐ ๋จ๊ณ๋ก ์งํํ ๋ ๋์ ๋๋ ์ง์ฐ ์์ด ๋น ๋ฅด๊ฒ ํ์๋ฉ๋๋ค.
4. ์ ๋๋ฉ์ด์ ๊ณผ ์ ํ ํจ๊ณผ
๋ณต์กํ ์ ๋๋ฉ์ด์
๊ณผ ์ ํ ํจ๊ณผ๋ ๋๋๋ก ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ผ๋ฉฐ, ํนํ ๋ณต์กํ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํด์ผ ํ๋ ๊ฒฝ์ฐ ๋์ฑ ๊ทธ๋ ์ต๋๋ค. experimental_Offscreen์ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์
์ด๋ ์ ํ ํจ๊ณผ์ ๊ด๋ จ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฏธ๋ฆฌ ๋ ๋๋งํจ์ผ๋ก์จ ์ ๋๋ฉ์ด์
์ด ๋ฒ๋ฒ
๊ฑฐ๋ฆผ ์์ด ๋ถ๋๋ฝ๊ฒ ์คํ๋๋๋ก ํ ์ ์์ต๋๋ค.
์์: ์ฝํ
์ธ ์ ๋ค๋ฅธ ๋ ์ด์ด๊ฐ ๋ค๋ฅธ ์๋๋ก ์์ง์ด๋ ํจ๋ด๋์ค ์คํฌ๋กค ํจ๊ณผ๊ฐ ์๋ ์น์ฌ์ดํธ๋ฅผ ์๊ฐํด๋ณด์ธ์. ํ์ฌ ๋ณด์ด์ง ์์ง๋ง ๊ณง ์์ผ์ ๋ค์ด์ฌ ๋ ์ด์ด๋ค์ experimental_Offscreen์ ์ฌ์ฉํ์ฌ ๋ฏธ๋ฆฌ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ ํ๋ ๋ฆฌ์์ค๋ฅผ ๊ฐ์ง ์ฅ์น์์๋ ํจ๋ด๋์ค ํจ๊ณผ๊ฐ ๋ถ๋๋ฝ๊ณ ์ํํ๊ฒ ์คํ๋ฉ๋๋ค.
5. ๋ผ์ฐํธ ์ ํ
๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์
(SPA)์์ ๋ค๋ฅธ ๋ผ์ฐํธ ๊ฐ์ ์ด๋ํ ๋, ์ ๋ผ์ฐํธ์ ์ฝํ
์ธ ๊ฐ ๋ ๋๋ง๋๋ ๋์ ๋์ ๋๋ ์ง์ฐ์ด ์์ ์ ์์ต๋๋ค. experimental_Offscreen์ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ํ์ฌ ๋ผ์ฐํธ์ ์๋ ๋์ ๋ค์ ๋ผ์ฐํธ์ ์ฝํ
์ธ ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ด๋ ๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ ์ข์ ๋ผ์ฐํธ ์ ํ์ ๊ฐ์ ธ์ต๋๋ค.
์์: ์จ๋ผ์ธ ์์ ์ ์์ํด๋ณด์ธ์. ์ฌ์ฉ์๊ฐ ํ์ ๋ฉ๋ด์์ ์ ํ ์นดํ
๊ณ ๋ฆฌ๋ฅผ ํด๋ฆญํ๋ฉด, ํด๋น ์นดํ
๊ณ ๋ฆฌ์ ์ ํ ๋ชฉ๋ก์ ํ์ํ๋ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ฉ์๊ฐ ๊ทธ ์นดํ
๊ณ ๋ฆฌ๋ก ์ด๋ํ๊ธฐ *์ ์* experimental_Offscreen์ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ ๋๋ง์ ์์ํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ฉ์๊ฐ ์ค์ ๋ก ์ด๋ํ์ ๋ ๋ชฉ๋ก์ด ๊ฑฐ์ ์ฆ์ ์ค๋น๋ฉ๋๋ค.
experimental_Offscreen ๊ตฌํํ๊ธฐ
experimental_Offscreen์ ์์ง ์คํ์ ์ด๋ฉฐ ํฅํ API๊ฐ ๋ณ๊ฒฝ๋ ์ ์์ง๋ง, ๊ธฐ๋ณธ์ ์ธ ๊ตฌํ์ ๋น๊ต์ ๊ฐ๋จํฉ๋๋ค. ๋ค์์ experimental_Offscreen์ ์ฌ์ฉํ๋ ๊ธฐ๋ณธ์ ์ธ ์์ ์
๋๋ค:
์ด๊ฒ์ ๋น์ฉ์ด ๋ง์ด ๋๋ ์ปดํฌ๋ํธ์ ๋๋ค.
; } ```์ด ์์ ์์ ExpensiveComponent๋ Offscreen ์ปดํฌ๋ํธ๋ก ๊ฐ์ธ์ฌ ์์ต๋๋ค. mode prop์ ์ปดํฌ๋ํธ๊ฐ ๋ณด์ด๋์ง ์จ๊ฒจ์ง๋์ง๋ฅผ ์ ์ดํฉ๋๋ค. mode๊ฐ "hidden"์ผ๋ก ์ค์ ๋๋ฉด ์ปดํฌ๋ํธ๋ ์คํ์คํฌ๋ฆฐ์ผ๋ก ๋ ๋๋ง๋ฉ๋๋ค. mode๊ฐ "visible"๋ก ์ค์ ๋๋ฉด ์ปดํฌ๋ํธ๊ฐ ํ์๋ฉ๋๋ค. setIsVisible ํจ์๋ ๋ฒํผ ํด๋ฆญ ์ ์ด ์ํ๋ฅผ ๋ณ๊ฒฝํฉ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ExpensiveComponent๋ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ ๋๋ง๋ฉ๋๋ค. ์ฌ์ฉ์๊ฐ "Show Content" ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ปดํฌ๋ํธ๊ฐ ๋ณด์ด๊ฒ ๋๋ฉฐ, ์ด๋ฏธ ์ฌ์ ๋ ๋๋ง๋์๊ธฐ ๋๋ฌธ์ ๊ฑฐ์ ์ฆ๊ฐ์ ์ธ ํ์๋ฅผ ์ ๊ณตํฉ๋๋ค.
mode Prop ์ดํดํ๊ธฐ
mode prop์ Offscreen ์ปดํฌ๋ํธ์ ๋์์ ์ ์ดํ๋ ํต์ฌ์
๋๋ค. ๋ค์๊ณผ ๊ฐ์ ๊ฐ์ ํ์ฉํฉ๋๋ค:
"visible": ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋์ด ํ๋ฉด์ ํ์๋ฉ๋๋ค."hidden": ์ปดํฌ๋ํธ๊ฐ ์คํ์คํฌ๋ฆฐ์ผ๋ก ๋ ๋๋ง๋ฉ๋๋ค. ์ด๊ฒ์ด ๋ฐฑ๊ทธ๋ผ์ด๋ ๋ ๋๋ง์ ํต์ฌ์ ๋๋ค."unstable-defer": ์ด ๋ชจ๋๋ ์ฐ์ ์์๊ฐ ๋ฎ์ ์ ๋ฐ์ดํธ์ ์ฌ์ฉ๋ฉ๋๋ค. React๋ ๋ฉ์ธ ์ค๋ ๋๊ฐ ๋ ๋ฐ์ ๋ ์ปดํฌ๋ํธ์ ๋ ๋๋ง์ ๋์ค์ผ๋ก ๋ฏธ๋ฃจ๋ ค๊ณ ์๋ํฉ๋๋ค.
experimental_Offscreen ์ฌ์ฉ ์ ๊ณ ๋ ค์ฌํญ
experimental_Offscreen์ด ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ง๋ง, ์ฌ์ฉํ ๋ ๋ค์ ์์๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋: ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ปดํฌ๋ํธ๋ฅผ ๋ฏธ๋ฆฌ ๋ ๋๋งํ๋ ๊ฒ์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์๋นํฉ๋๋ค. ํนํ ๋ฆฌ์์ค๊ฐ ์ ํ๋ ์ฅ์น์์๋ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ๋ชจ๋ํฐ๋งํ๊ณ ํ ๋ฒ์ ๋๋ฌด ๋ง์ ์ปดํฌ๋ํธ๋ฅผ ๋ฏธ๋ฆฌ ๋ ๋๋งํ์ง ์๋๋ก ์ฃผ์ํด์ผ ํฉ๋๋ค.
- ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ:
experimental_Offscreen์ด ์ฒด๊ฐ ์ฑ๋ฅ์ ํฅ์์ํค์ง๋ง, ๋ธ๋ผ์ฐ์ ๊ฐOffscreen์ปดํฌ๋ํธ์ ์ฝ๋๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ํ์ฑํด์ผ ํ๋ฏ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ด ์ฝ๊ฐ ์ฆ๊ฐํ ์ ์์ต๋๋ค. ์ฅ๋จ์ ์ ์ ์คํ๊ฒ ๊ณ ๋ คํด์ผ ํฉ๋๋ค. - ์ปดํฌ๋ํธ ์
๋ฐ์ดํธ:
Offscreen์ผ๋ก ๊ฐ์ธ์ธ ์ปดํฌ๋ํธ๊ฐ ์ ๋ฐ์ดํธ๋ ๋, ํ์ฌ ์จ๊ฒจ์ ธ ์๋๋ผ๋ ๋ค์ ๋ ๋๋ง๋์ด์ผ ํฉ๋๋ค. ์ด๋ CPU ๋ฆฌ์์ค๋ฅผ ์๋นํ ์ ์์ต๋๋ค. ๋ถํ์ํ ์ ๋ฐ์ดํธ์ ์ ์ํด์ผ ํฉ๋๋ค. - ์คํ์ ํน์ฑ:
experimental_Offscreen์ ์คํ์ ์ธ ๊ธฐ๋ฅ์ด๋ฏ๋ก ํฅํ API๊ฐ ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค. ์ต์ React ๋ฌธ์๋ฅผ ๊ณ์ ํ์ธํ๊ณ ํ์ํ ๊ฒฝ์ฐ ์ฝ๋๋ฅผ ์์ ํ ์ค๋น๋ฅผ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
experimental_Offscreen ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
experimental_Offscreen์ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๊ณ ๊ทธ ์ด์ ์ ๊ทน๋ํํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ์ฑ๋ฅ ๋ณ๋ชฉ ํ์ ์๋ณ:
experimental_Offscreen์ ๊ตฌํํ๊ธฐ ์ ์ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์ผ์ผํค๋ ์ปดํฌ๋ํธ๋ฅผ ์๋ณํ์ญ์์ค. ํ๋กํ์ผ๋ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋๋ง ์๊ฐ์ ์ธก์ ํ๊ณ ์ต์ ํํ ์ ์๋ ์์ญ์ ์ฐพ์ผ์ญ์์ค. - ์๊ฒ ์์ํ๊ธฐ: ๋ช ๊ฐ์ ์ฃผ์ ์ปดํฌ๋ํธ์
experimental_Offscreen์ ๊ตฌํํ๋ ๊ฒ์ผ๋ก ์์ํ์ฌ ๊ฒฝํ๊ณผ ์์ ๊ฐ์ ์ป์ผ๋ฉด์ ์ ์ฐจ ์ฌ์ฉ ๋ฒ์๋ฅผ ๋ํ๊ฐ์ญ์์ค. ํ ๋ฒ์ ๋ชจ๋ ๊ฒ์ ์ต์ ํํ๋ ค๊ณ ํ์ง ๋ง์ญ์์ค. - ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง:
experimental_Offscreen์ ๊ตฌํํ ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ์ญ์์ค. ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋๋ง ์๊ฐ, ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋, CPU ์ฌ์ฉ๋ฅ ๊ณผ ๊ฐ์ ์งํ๋ฅผ ์ถ์ ํ์ญ์์ค. - ๋ค์ํ ์ฅ์น์์ ํ
์คํธ: ์ ์ฌ์ ๋ชจ๋ฐ์ผ ์ฅ์น๋ฅผ ํฌํจํ ๋ค์ํ ์ฅ์น์์ ์ ํ๋ฆฌ์ผ์ด์
์ ํ
์คํธํ์ฌ
experimental_Offscreen์ด ๋ค๋ฅธ ํ๋ซํผ์์ ์ํ๋ ์ฑ๋ฅ ๊ฐ์ ์ ์ ๊ณตํ๋์ง ํ์ธํ์ญ์์ค. - ๋์ ๊ณ ๋ ค:
experimental_Offscreen์ด ๋ชจ๋ ์ฑ๋ฅ ๋ฌธ์ ์ ๋ํ ์ต์์ ํด๊ฒฐ์ฑ ์ ์๋๋๋ค. ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ํด๊ฒฐํ๊ธฐ ์ํด ์ฝ๋ ๋ถํ , ์ง์ฐ ๋ก๋ฉ, ๋ฉ๋ชจ์ด์ ์ด์ ๊ณผ ๊ฐ์ ๋ค๋ฅธ ์ต์ ํ ๊ธฐ๋ฒ์ ๊ณ ๋ คํ์ญ์์ค. - ์ต์ ์ ๋ณด ์ ์ง:
experimental_Offscreen์ ๋ํ ์ต์ React ๋ฌธ์ ๋ฐ ์ปค๋ฎค๋ํฐ ํ ๋ก ์ ๊ณ์ ํ์ธํ์ญ์์ค. ์๋ก ๋์ค๋ API ๋ณ๊ฒฝ ์ฌํญ์ด๋ ๋ชจ๋ฒ ์ฌ๋ก์ ์ ์ํ์ญ์์ค.
experimental_Offscreen์ ๋ค๋ฅธ ์ต์ ํ ๊ธฐ๋ฒ๊ณผ ํตํฉํ๊ธฐ
experimental_Offscreen์ ๋ค๋ฅธ ์ฑ๋ฅ ์ต์ ํ ๊ธฐ๋ฒ๊ณผ ๊ฒฐํฉ๋ ๋ ๊ฐ์ฅ ์ ์๋ํฉ๋๋ค. ๊ณ ๋ คํด๋ณผ ๋ช ๊ฐ์ง ๊ธฐ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
1. ์ฝ๋ ๋ถํ
์ฝ๋ ๋ถํ ์ ์ ํ๋ฆฌ์ผ์ด์
์ ํ์์ ๋ฐ๋ผ ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฝ๋ ์ฒญํฌ๋ก ๋๋๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค. experimental_Offscreen์ ์ฝ๋ ๋ถํ ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ด ์ฒด๊ฐ ์ฑ๋ฅ์ ๋์ฑ ํฅ์์ํต๋๋ค.
2. ์ง์ฐ ๋ก๋ฉ
์ง์ฐ ๋ก๋ฉ์ ์ด๋ฏธ์ง ๋ฐ ๋น๋์ค์ ๊ฐ์ ๋ฆฌ์์ค์ ๋ก๋ฉ์ ํ์ํ ๋๊น์ง ์ง์ฐ์ํค๋ ๊ธฐ์ ์
๋๋ค. ์ด๋ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค. experimental_Offscreen์ ์ง์ฐ ๋ก๋ฉ๋ ๋ฆฌ์์ค๋ฅผ ํฌํจํ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ์ฌ ์ฌ์ฉ์๊ฐ ์ํธ์์ฉํ ๋ ํ์๋ ์ค๋น๊ฐ ๋๋๋ก ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
3. ๋ฉ๋ชจ์ด์ ์ด์
๋ฉ๋ชจ์ด์ ์ด์
์ ๋น์ฉ์ด ๋ง์ด ๋๋ ํจ์ ํธ์ถ์ ๊ฒฐ๊ณผ๋ฅผ ์บ์ํ๊ณ ๋์ผํ ์
๋ ฅ์ด ๋ค์ ์ฌ์ฉ๋ ๋ ์บ์๋ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ ๊ธฐ์ ์
๋๋ค. ์ด๋ ํนํ ๋์ผํ props๋ก ์์ฃผ ๋ค์ ๋ ๋๋ง๋๋ ์ปดํฌ๋ํธ์ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. experimental_Offscreen์ ๋ฉ๋ชจ์ด์ ์ด์
๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ์ฌ ์ฑ๋ฅ์ ๋์ฑ ์ต์ ํํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
4. ๊ฐ์ํ
์์ ๋
ผ์ํ ๋ฐ์ ๊ฐ์ด, ๊ฐ์ํ๋ ํ์ฌ ํ๋ฉด์ ๋ณด์ด๋ ํญ๋ชฉ๋ง ๋ ๋๋งํ์ฌ ํฐ ๋ฐ์ดํฐ ๋ชฉ๋ก์ ํจ์จ์ ์ผ๋ก ๋ ๋๋งํ๋ ๊ธฐ์ ์
๋๋ค. ๊ฐ์ํ๋ฅผ experimental_Offscreen๊ณผ ๊ฒฐํฉํ๋ฉด ๋ชฉ๋ก์์ ๋ค์์ ๋์ฌ ํญ๋ชฉ๋ค์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ์ฌ ๋ถ๋๋ฌ์ด ์คํฌ๋กค ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
๊ฒฐ๋ก
React์ experimental_Offscreen API๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ ๋๋งํจ์ผ๋ก์จ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ปดํฌ๋ํธ๊ฐ ํ์ํด์ง๊ธฐ ์ ์ ๋ฏธ๋ฆฌ ๋ ๋๋งํจ์ผ๋ก์จ ์ฒด๊ฐ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํค๊ณ , ๋ก๋ฉ ์๊ฐ์ ์ค์ด๋ฉฐ, ๋ฐ์์ฑ์ ๋์ผ ์ ์์ต๋๋ค. experimental_Offscreen์ ์์ง ์คํ์ ์ธ ๊ธฐ๋ฅ์ด์ง๋ง, React ์ ํ๋ฆฌ์ผ์ด์
์ ์ด๋ค ์ด์ ์ ์ค ์ ์๋์ง ํ์ํ๊ณ ์คํํด ๋ณผ ๊ฐ์น๊ฐ ์์ต๋๋ค.
์ฅ๋จ์ ์ ์ ์คํ๊ฒ ๊ณ ๋ คํ๊ณ , ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๋ฉฐ, experimental_Offscreen์ ๋ค๋ฅธ ์ต์ ํ ๊ธฐ๋ฒ๊ณผ ๊ฒฐํฉํ์ฌ ์ต์์ ๊ฒฐ๊ณผ๋ฅผ ์ป๋ ๊ฒ์ ๊ธฐ์ตํ์ญ์์ค. React ์ํ๊ณ๊ฐ ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ, experimental_Offscreen์ ์ฅ์น๋ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๊ด๊ณ์์ด ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ํํ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ณ ์ฑ๋ฅ ๋ฐ ์ฌ์ฉ์ ์นํ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ๋ ๋ฐ ์ ์ ๋ ์ค์ํ ๋๊ตฌ๊ฐ ๋ ๊ฒ์
๋๋ค.