Reactμ μ€νμ μΈ experimental_Offscreen APIλ‘ λ°±κ·ΈλΌμ΄λ λ λλ§μ μμ보μΈμ. 볡μ‘ν μ±μ μ±λ₯, UX, μ²΄κ° μ§μ° μκ° κ°μ λ°©λ²μ λ€λ£¨λ μ’ ν© κ°μ΄λμ λλ€.
React experimental_Offscreen ꡬν: ν₯μλ μ±λ₯μ μν λ°±κ·ΈλΌμ΄λ λ λλ§
λμμμ΄ μ§ννλ μΉ κ°λ° νκ²½μμ μ±λ₯ μ΅μ νλ μ¬μ ν μ€μν λ¬Έμ μ
λλ€. μ¬μ©μ μΈν°νμ΄μ€ ꡬμΆμ μν μΈκΈ° μλ JavaScript λΌμ΄λΈλ¬λ¦¬μΈ Reactλ experimental_Offscreenμ΄λΌλ μ€νμ μΈ APIλ₯Ό λμ
νμ΅λλ€. μ΄ APIλ λ°±κ·ΈλΌμ΄λ λ λλ§μ νμ©νμ¬ μ±λ₯μ ν¬κ² ν₯μμν¬ κ²μ μ½μν©λλ€. μ΄ μ’
ν© κ°μ΄λμμλ experimental_Offscreenμ 볡μ‘ν λ΄μ©, μ΄μ , ꡬν μΈλΆ μ 보 λ° μ μ¬μ μΈ μ¬μ© μ¬λ‘μ λν΄ μμΈν μμλ΄
λλ€.
ν΅μ¬ κ°λ μ΄ν΄: λ°±κ·ΈλΌμ΄λ λ λλ§
Reactμ μ ν΅μ μΈ λ λλ§μ λκΈ°μ μΌλ‘ λ°μν©λλ€. μ»΄ν¬λνΈμ λ°μ΄ν°κ° λ³κ²½λλ©΄ Reactλ ν΄λΉ μ»΄ν¬λνΈμ κ·Έ μμλ€μ λ€μ λ λλ§νλ©°, μ΄λ νΉν 볡μ‘ν μ ν리μΌμ΄μ μμ μ±λ₯ λ³λͺ© νμμ μ λ°ν μ μμ΅λλ€. λ°λ©΄μ λ°±κ·ΈλΌμ΄λ λ λλ§μ Reactκ° λ©μΈ μ€λ λλ₯Ό μ°¨λ¨νμ§ μκ³ λ°±κ·ΈλΌμ΄λμμ μ»΄ν¬λνΈμ μ λ°μ΄νΈλ μνλ₯Ό μ€λΉν μ μλλ‘ ν©λλ€. μ΄λ λΉμ©μ΄ λ§μ΄ λλ λ λλ§ μμ μ΄ μ§νλλ λμμλ μ¬μ©μ μΈν°νμ΄μ€κ° λ°μμ±μ μ μ§νλ€λ κ²μ μλ―Έν©λλ€.
experimental_Offscreen APIλ Reactμ μ»΄ν¬λνΈ(λλ μ»΄ν¬λνΈ νμ νΈλ¦¬)λ₯Ό λ³λμ λ λλ§ μ»¨ν
μ€νΈμμ μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§νλλ‘ μ§μνλ λ©μ»€λμ¦μ μ 곡ν©λλ€. μ΄ μ€νμ€ν¬λ¦° λ λλ§μ μ¦μ 보μ΄λ μ¬μ©μ μΈν°νμ΄μ€μ μν₯μ μ£Όμ§ μμ΅λλ€. μ€νμ€ν¬λ¦° λ λλ§μ΄ μλ£λλ©΄ μ
λ°μ΄νΈλ μ½ν
μΈ λ₯Ό λ§€λλ½κ² νλ©΄μ νμν μ μμ΄ λ λΆλλ½κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡ν©λλ€. μ΄λ λ¬΄κ±°μ΄ κ³μ°, λ°μ΄ν° κ°μ Έμ€κΈ° λλ 볡μ‘ν μ λλ©μ΄μ
μ ν¬ν¨νλ μ»΄ν¬λνΈμ νΉν μ μ©ν©λλ€.
experimental_Offscreen μ¬μ©μ μ£Όμ μ΄μ
- ν₯μλ μ²΄κ° μ±λ₯: λ°±κ·ΈλΌμ΄λμμ μ»΄ν¬λνΈλ₯Ό λ λλ§ν¨μΌλ‘μ¨
experimental_Offscreenμ μ²΄κ° μ§μ° μκ°μ μ€μ΄κ³ κ³μ° μ§μ½μ μΈ μμ μ€μλ μ¬μ©μ μΈν°νμ΄μ€κ° λλ¦¬κ² λκ»΄μ§λ κ²μ λ°©μ§ν©λλ€. - ν₯μλ λ°μμ±: λ©μΈ μ€λ λκ° μ°¨λ¨λμ§ μμΌλ―λ‘ μ¬μ©μ μνΈμμ©μ΄ μ μνκ² μ²λ¦¬λκ³ μ ν리μΌμ΄μ μ΄ λ°μμ±μ μ μ§ν©λλ€.
- μ§ν° κ°μ: λ°±κ·ΈλΌμ΄λ λ λλ§μ μ§ν°μ νλ μ λλ‘μ μ΅μννμ¬ λ λΆλλ¬μ΄ μ λλ©μ΄μ κ³Ό μ νμ κ°λ₯νκ² ν©λλ€.
- μ΅μ νλ 리μμ€ νμ©: νμν λλ§ μ»΄ν¬λνΈλ₯Ό λ λλ§νκ³ κ³μ°μ λ°±κ·ΈλΌμ΄λλ‘ μ€νλ‘λν¨μΌλ‘μ¨
experimental_Offscreenμ νΉν λͺ¨λ°μΌ μ₯μΉμμ 리μμ€ νμ©λμ λ°°ν°λ¦¬ μλͺ μ κ°μ ν μ μμ΅λλ€. - λ§€λλ¬μ΄ μ ν: μ λ°μ΄νΈλ μ½ν μΈ λ₯Ό μ€νμ€ν¬λ¦°μμ μ€λΉνλ κΈ°λ₯μ λ€μν μνλ λ·° μ¬μ΄μ λ§€λλ¬μ΄ μ νμ κ°λ₯νκ² νμ¬ μ λ°μ μΈ μ¬μ©μ κ²½νμ ν₯μμν΅λλ€.
experimental_Offscreen ꡬννκΈ°
ꡬνμ λ€μ΄κ°κΈ° μ μ, μ΄λ¦μμ μ μ μλ―μ΄ experimental_Offscreenμ μμ§ μ€ν λ¨κ³λΌλ μ μ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. μ΄λ APIκ° λ³κ²½λ μ μμΌλ©°, μ² μ ν ν
μ€νΈμ μ μ€ν κ³ λ € μμ΄λ νλ‘λμ
νκ²½μ μ ν©νμ§ μμ μ μμμ μλ―Έν©λλ€. μ΄λ₯Ό μ¬μ©νλ €λ©΄ μΌλ°μ μΌλ‘ μ€νμ κΈ°λ₯μ μ§μνλ React λ²μ μ΄ νμνλ©° λμμ± λͺ¨λλ₯Ό νμ±νν΄μΌ ν©λλ€.
κΈ°λ³Έ μ¬μ©λ²
experimental_Offscreenμ μ¬μ©νλ κΈ°λ³Έμ μΈ λ°©λ²μ λ°±κ·ΈλΌμ΄λμμ λ λλ§νλ €λ μ»΄ν¬λνΈλ₯Ό <Offscreen> μ»΄ν¬λνΈλ‘ κ°μΈλ κ²μ
λλ€. react ν¨ν€μ§μμ μ΄λ₯Ό κ°μ ΈμμΌ ν©λλ€.
import { Offscreen } from 'react';
function MyComponent() {
return (
<Offscreen mode="visible">
<ExpensiveComponent />
</Offscreen>
);
}
μ΄ μμμ <ExpensiveComponent />λ μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§λ©λλ€. mode propμ μ½ν
μΈ κ° μ΄κΈ°μ νμλ μ§ μ¨κ²¨μ§μ§λ₯Ό μ μ΄ν©λλ€.
mode Prop
mode propμ <Offscreen> μ»΄ν¬λνΈμ κ°μμ±κ³Ό λ λλ§ λμμ μ μ΄νλ λ° νμμ μ
λλ€. λ κ°μ§ κ°λ₯ν κ°μ λ°μ΅λλ€:
"visible":<Offscreen>μ»΄ν¬λνΈ λ΄λΆμ μ½ν μΈ κ° λ λλ§λκ³ μ¦μ νμλ©λλ€. λ΄λΆμ μΌλ‘λ μ¬μ ν λμμ± λ λλ§μ μ΄μ μ λ릴 μ μμ§λ§, μ΄κΈ° μ¨κΉμ΄λ μ€λΉ λ¨κ³λ μμ΅λλ€."hidden":<Offscreen>μ»΄ν¬λνΈ λ΄λΆμ μ½ν μΈ λ μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§λλ©° μ΄κΈ°μ νμλμ§ μμ΅λλ€.modepropμ λͺ μμ μΌλ‘"visible"λ‘ λ³κ²½ν λκΉμ§ μ¨κ²¨μ§ μνλ‘ μ μ§λ©λλ€. μ΄κ²μ΄ λ°±κ·ΈλΌμ΄λ λ λλ§μ μΌλ°μ μΈ μ¬μ© μ¬λ‘μ λλ€.
React μνλ₯Ό μ¬μ©νμ¬ mode propμ λμ μΌλ‘ μ μ΄ν μ μμΌλ©°, νΉμ 쑰건μ΄λ μ¬μ©μ μνΈμμ©μ λ°λΌ μ€νμ€ν¬λ¦° μ½ν
μΈ λ₯Ό νμνκ±°λ μ¨κΈΈ μ μμ΅λλ€.
import { useState } from 'react';
import { Offscreen } from 'react';
function MyComponent() {
const [isVisible, setIsVisible] = useState(false);
return (
<>
<button onClick={() => setIsVisible(true)}>Show Content</button>
<Offscreen mode={isVisible ? "visible" : "hidden"}>
<ExpensiveComponent />
</Offscreen>
<>
);
}
μ΄ μμμ <ExpensiveComponent />λ μ΄κΈ°μ μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§λ©λλ€(mode="hidden"). μ¬μ©μκ° λ²νΌμ ν΄λ¦νλ©΄ isVisible μνκ° trueλ‘ μ€μ λμ΄ mode propμ΄ "visible"λ‘ λ³κ²½λκ³ μ€νμ€ν¬λ¦° μ½ν
μΈ κ° νμλ©λλ€.
Suspenseμ ν¨κ» μ¬μ©νλ κ³ κΈ μ¬μ©λ²
experimental_Offscreenμ React Suspenseμ μννκ² ν΅ν©λμ΄ λ‘λ© μνμ λΉλκΈ° λ°μ΄ν° κ°μ Έμ€κΈ°λ₯Ό λ μ°μνκ² μ²λ¦¬ν μ μμ΅λλ€. <Offscreen> μ»΄ν¬λνΈλ₯Ό <Suspense> μ»΄ν¬λνΈλ‘ κ°μΈμ μ½ν
μΈ κ° λ°±κ·ΈλΌμ΄λμμ μ€λΉλλ λμ ν΄λ°± UIλ₯Ό νμν μ μμ΅λλ€.
import { Suspense } from 'react';
import { Offscreen } from 'react';
function MyComponent() {
return (
<Suspense fallback={<p>Loading...</p>}>
<Offscreen mode="hidden">
<ExpensiveComponent />
</Offscreen>
</Suspense>
);
}
μ΄ μμμ <ExpensiveComponent />κ° μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§λλ λμ <p>Loading...</p> ν΄λ°±μ΄ νμλ©λλ€. μ€νμ€ν¬λ¦° λ λλ§μ΄ μλ£λλ©΄ <ExpensiveComponent />κ° ν΄λ°± UIλ₯Ό λ체ν©λλ€.
μ λ°μ΄νΈ λ° λ¦¬λ λλ§ μ²λ¦¬
<ExpensiveComponent />κ° μμ‘΄νλ λ°μ΄ν°κ° λ³κ²½λλ©΄ Reactλ μλμΌλ‘ μ΄λ₯Ό μ€νμ€ν¬λ¦°μμ λ€μ λ λλ§ν©λλ€. μ
λ°μ΄νΈλ μ½ν
μΈ λ λ°±κ·ΈλΌμ΄λμμ μ€λΉλλ©°, mode propμ΄ "visible"λ‘ μ€μ λλ©΄ μ
λ°μ΄νΈλ μ½ν
μΈ κ° λ§€λλ½κ² κ΅μ²΄λ©λλ€.
experimental_Offscreenμ μ¬μ© μ¬λ‘
experimental_Offscreenμ λ λλ§ λΉμ©μ΄ λ§μ΄ λ€κ±°λ, λ°μ΄ν° κ°μ Έμ€κΈ°κ° ν¬ν¨λκ±°λ, μ¦μ 보μ΄μ§λ μμ§λ§ 미리 μ€λΉν΄μΌ νλ μ»΄ν¬λνΈκ° μλ μλ리μ€μμ νΉν μ μ©ν©λλ€. λ€μμ λͺ κ°μ§ μΌλ°μ μΈ μ¬μ© μ¬λ‘μ
λλ€:
- ν μΈν°νμ΄μ€: λΉνμ± νμ μ½ν
μΈ λ₯Ό λ°±κ·ΈλΌμ΄λμμ 미리 λ λλ§νμ¬ μ¬μ©μκ° λ€λ₯Έ νμΌλ‘ μ νν λ μ½ν
μΈ κ° μ΄λ―Έ μ€λΉλμ΄ μ¦μ νμλλλ‘ ν©λλ€. μ΄λ νΉν νμ 볡μ‘ν λ°μ΄ν°λ μκ°ν μλ£κ° ν¬ν¨λ κ²½μ° ν μΈν°νμ΄μ€μ μ²΄κ° μ±λ₯μ κ·Ήμ μΌλ‘ ν₯μμν΅λλ€. κ° νμ΄ λ€λ₯Έ μ°¨νΈμ ν
μ΄λΈ μΈνΈλ₯Ό νμνλ κΈμ΅ λμ보λλ₯Ό μμν΄ λ³΄μΈμ.
experimental_Offscreenμ μ¬μ©νλ©΄ λΉνμ± νμ μ°¨νΈλ₯Ό 미리 λ λλ§νμ¬ μ¬μ©μκ° ν μ¬μ΄λ₯Ό μ΄λν λ λΆλλ¬μ΄ μ νμ 보μ₯ν μ μμ΅λλ€. - λκ·λͺ¨ λͺ©λ‘ λ° κ·Έλ¦¬λ: λκ·λͺ¨ λͺ©λ‘μ΄λ 그리λμμ νμ¬ λ³΄μ΄μ§ μλ νλͺ©μ μ½ν μΈ λ₯Ό μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§νμ¬ μ¬μ©μκ° μ€ν¬λ‘€ν λ μ νλͺ©μ΄ μ΄λ―Έ μ€λΉλμ΄ μ§μ° μμ΄ νμλ μ μλλ‘ ν©λλ€. μ΄λ λ°μ΄ν°μ μΌλΆλ§ λ λλ§νλ κ°μνλ λͺ©λ‘ λ° κ·Έλ¦¬λμ νΉν ν¨κ³Όμ μ λλ€. μλ°± κ°μ μ νμ νμνλ μ μμκ±°λ μΉμ¬μ΄νΈλ₯Ό μκ°ν΄ 보μΈμ. μ¬μ©μκ° μ€ν¬λ‘€ν λ μ ν μΈλΆ μ 보λ₯Ό μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§ν¨μΌλ‘μ¨ λ μ μ°ν λΈλΌμ°μ§ κ²½νμ λ§λ€ μ μμ΅λλ€.
- 볡μ‘ν μ λλ©μ΄μ
λ° μ ν: μ λλ©μ΄μ
μ΄λ μ νμ λ€μ μνλ₯Ό μ€νμ€ν¬λ¦°μμ μ€λΉνμ¬ μ λλ©μ΄μ
μ΄λ μ νμ΄ νΈλ¦¬κ±°λ λ μ§ν°λ νλ μ λλ‘ μμ΄ λΆλλ½κ² μ€νλ μ μλλ‘ ν©λλ€. μ΄λ 볡μ‘ν κ³μ°μ΄λ λ°μ΄ν° μ‘°μμ ν¬ν¨νλ μ λλ©μ΄μ
μ νΉν μ€μν©λλ€. 볡μ‘ν νμ΄μ§ μ νμ΄ μλ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό μκ°ν΄ 보μΈμ.
experimental_Offscreenμ μ¬μ©νλ©΄ λͺ©μ μ§ νμ΄μ§λ₯Ό 미리 λ λλ§νμ¬ μ νμ΄ λ§€λλ½κ³ μ¦κ°μ μΌλ‘ 보μ΄κ² ν μ μμ΅λλ€. - λ°μ΄ν° ν리νμΉ(Pre-fetching): μμ§ λ³΄μ΄μ§λ μμ§λ§ κ³§ νμν κ°λ₯μ±μ΄ μλ μ»΄ν¬λνΈμ λ°μ΄ν° κ°μ Έμ€κΈ°λ₯Ό μμν©λλ€. λ°μ΄ν°κ° κ°μ Έμμ§λ©΄ μ»΄ν¬λνΈλ₯Ό μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§ν λ€μ, νμλ λ μ¦μ 보μ¬μ€ μ μμ΅λλ€. μ΄λ μ²΄κ° λ‘λ© μκ°μ μ€μ¬ μ¬μ©μ κ²½νμ ν¬κ² ν₯μμν¬ μ μμ΅λλ€. μλ₯Ό λ€μ΄, μμ λ―Έλμ΄ νλ«νΌμμ μ¬μ©μμ νΌλμ μλ λ€μ λͺ κ°μ κ²μλ¬Όμ λν λ°μ΄ν°λ₯Ό 미리 κ°μ Έμ μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§νμ¬ μ¬μ©μκ° μ€ν¬λ‘€ν λ λ°λ‘ νμλ μ μλλ‘ μ€λΉν μ μμ΅λλ€.
- μ¨κ²¨μ§ μ»΄ν¬λνΈ: μ²μμ μ¨κ²¨μ Έ μλ μ»΄ν¬λνΈ(μ: λͺ¨λ¬μ΄λ λλ‘λ€μ΄)λ₯Ό μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§νμ¬ νμλ λ μ΄λ―Έ μ€λΉλμ΄ μ¦μ 보μ¬μ€ μ μλλ‘ ν©λλ€. μ΄λ μ¬μ©μκ° μ»΄ν¬λνΈμ μνΈμμ©ν λ λμ λλ μ§μ°μ λ°©μ§ν©λλ€. μ΄κΈ°μ μ¨κ²¨μ§ μ€μ ν¨λμ μμν΄ λ³΄μΈμ. μ΄λ₯Ό μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§νλ©΄ μ¬μ©μκ° μ€μ μμ΄μ½μ ν΄λ¦ν λ μ¦μ λνλλλ‘ ν μ μμ΅λλ€.
experimental_Offscreen μ¬μ©μ μν λͺ¨λ² μ¬λ‘
experimental_Offscreenμ ν¨κ³Όμ μΌλ‘ νμ©νκ³ κ·Έ μ΄μ μ κ·Ήλννλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό κ³ λ €νμμμ€:
- μ±λ₯ λ³λͺ© νμ μλ³: νλ‘νμΌλ§ λꡬλ₯Ό μ¬μ©νμ¬ μ ν리μΌμ΄μ
μμ μ±λ₯ λ³λͺ© νμμ μΌμΌν€λ μ»΄ν¬λνΈλ₯Ό μλ³νμμμ€. μ΄λ¬ν μ»΄ν¬λνΈμ λ¨Όμ
experimental_Offscreenμ μ¬μ©νλ λ° μ§μ€νμμμ€. - μ±λ₯ μΈ‘μ :
experimental_Offscreenμ ꡬννκΈ° μ κ³Ό νμ μ ν리μΌμ΄μ μ μ±λ₯μ μΈ‘μ νμ¬ μ€μ λ‘ κ°μ λκ³ μλμ§ νμΈνμμμ€. νλ μ μλ, λ λλ§ μκ°, μνΈμμ©κΉμ§μ μκ°(TTI)κ³Ό κ°μ μ§νλ₯Ό μ¬μ©νμμμ€. - κ³Όλν μ¬μ© νΌνκΈ°:
experimental_Offscreenμ λ¨μ©νμ§ λ§μμμ€. λ무 λ§μ μ»΄ν¬λνΈλ₯Ό μ€νμ€ν¬λ¦°μΌλ‘ λ λλ§νλ©΄ κ³Όλν 리μμ€λ₯Ό μλΉνκ³ μ μ¬μ μΌλ‘ μ±λ₯μ μ νμν¬ μ μμ΅λλ€. κ°μ₯ μ±λ₯μ΄ μ€μν μ»΄ν¬λνΈμ μ§μ€νμ¬ μ μ€νκ² μ¬μ©νμμμ€. - λ©λͺ¨λ¦¬ μ¬μ©λ κ³ λ €: μ€νμ€ν¬λ¦° λ λλ§μ λ©λͺ¨λ¦¬ μ¬μ©λμ μ¦κ°μν¬ μ μμ΅λλ€. μ ν리μΌμ΄μ μ λ©λͺ¨λ¦¬ μ¬μ©λμ λͺ¨λν°λ§νμ¬ νμ© κ°λ₯ν νλ λ΄μ μλμ§ νμΈνμμμ€.
- μ² μ ν ν
μ€νΈ:
experimental_Offscreenμ μ€νμ μΈ APIμ΄λ―λ‘ λ€μν μ₯μΉμ λΈλΌμ°μ μμ μ ν리μΌμ΄μ μ μ² μ ν ν μ€νΈνμ¬ μμλλ‘ μλνλμ§ νμΈνλ κ²μ΄ μ€μν©λλ€. - API λ³κ²½ μ¬ν μΈμ§: μ΅μ React λ¦΄λ¦¬μ€ μ 보λ₯Ό νμΈνκ³
experimental_OffscreenAPIκ° λ°μ ν¨μ λ°λΌ μ½λλ₯Ό μμ ν μ€λΉλ₯Ό νμμμ€. - React λμμ± λͺ¨λμ ν¨κ» μ¬μ©:
experimental_Offscreenμ React λμμ± λͺ¨λμ μννκ² μλνλλ‘ μ€κ³λμμ΅λλ€. λ°±κ·ΈλΌμ΄λ λ λλ§μ μ΄μ μ μμ ν μ€ννλ €λ©΄ μ ν리μΌμ΄μ μ΄ λμμ± λͺ¨λλ₯Ό μ¬μ©νκ³ μλμ§ νμΈνμμμ€. - DevToolsλ‘ νλ‘νμΌλ§: React DevToolsλ₯Ό νμ©νμ¬ μ»΄ν¬λνΈλ₯Ό νλ‘νμΌλ§νκ³
experimental_Offscreenμ΄ λ λλ§ μ±λ₯μ λ―ΈμΉλ μν₯μ μ΄ν΄νμμμ€. μ΄λ μ μ¬μ μΈ λ¬Έμ λ₯Ό μλ³νκ³ κ΅¬νμ μ΅μ ννλ λ° λμμ΄ λ©λλ€.
μ μ¬μ μΈ κ³Όμ λ° κ³ λ € μ¬ν
experimental_Offscreenμ μλΉν μ±λ₯ μ΄μ μ μ 곡νμ§λ§ μ μ¬μ μΈ κ³Όμ μ κ³ λ € μ¬νμ μΈμ§νλ κ²μ΄ μ€μν©λλ€:
- μ€νμ μΈ νΉμ±: APIκ° μ€ν λ¨κ³μ΄λ―λ‘ λ³κ²½λ μ μμΌλ©° μμ μ μ΄μ§ μμ μ μμ΅λλ€. μ΄λ ν₯ν React 릴리μ€μμ μ½λ μμ μ΄ νμν μ μμμ μλ―Έν©λλ€.
- 볡μ‘μ± μ¦κ°:
experimental_Offscreenμ ꡬννλ©΄ μ½λλ² μ΄μ€μ 볡μ‘μ±μ΄ μΆκ°λ μ μμ΅λλ€. ꡬνμ μ μ€νκ² κ³ννκ³ μλ‘μ΄ λ²κ·Έλ νκ·λ₯Ό μ λ°νμ§ μλλ‘ νλ κ²μ΄ μ€μν©λλ€. - λ©λͺ¨λ¦¬ μ€λ²ν€λ: μ€νμ€ν¬λ¦° λ λλ§μ νΉν ν¬κ±°λ 볡μ‘ν μ»΄ν¬λνΈλ₯Ό λ λλ§ν κ²½μ° λ©λͺ¨λ¦¬ μ¬μ©λμ μ¦κ°μν¬ μ μμ΅λλ€. μ ν리μΌμ΄μ μ λ©λͺ¨λ¦¬ μ¬μ©λμ λͺ¨λν°λ§νκ³ λ©λͺ¨λ¦¬ μ€λ²ν€λλ₯Ό μ΅μννλλ‘ κ΅¬νμ μ΅μ ννμμμ€.
- λΈλΌμ°μ νΈνμ±: νκ²ν
νλ λΈλΌμ°μ κ°
experimental_Offscreenλ° React λμμ± λͺ¨λμ νμν κΈ°λ₯μ μμ ν μ§μνλμ§ νμΈνμμμ€. μ€λλ λΈλΌμ°μ μ κ²½μ° ν΄λ¦¬νμ΄λ λ체 μ κ·Ό λ°©μμ΄ νμν μ μμ΅λλ€.
React Nativeμμμ experimental_Offscreen
experimental_Offscreenμ μμΉμ React Nativeμλ μ μ©λ μ μμ§λ§ ꡬν μΈλΆ μ 보λ λ€λ₯Ό μ μμ΅λλ€. React Nativeμμλ λ€μκ³Ό κ°μ κΈ°μ μ μ¬μ©νμ¬ μ μ¬ν λ°±κ·ΈλΌμ΄λ λ λλ§ ν¨κ³Όλ₯Ό μ»μ μ μμ΅λλ€:
React.memo: λ³κ²½λμ§ μμ μ»΄ν¬λνΈμ λΆνμν 리λ λλ§μ λ°©μ§νκΈ° μν΄React.memoλ₯Ό μ¬μ©ν©λλ€.useMemoλ°useCallback: λΉμ©μ΄ λ§μ΄ λλ κ³μ°κ³Ό ν¨μ μ μλ₯Ό λ©λͺ¨μ΄μ μ΄μ νμ¬ λΆνμνκ² λ€μ μ€νλλ κ²μ λ°©μ§νκΈ° μν΄ μ΄ ν λ€μ μ¬μ©ν©λλ€.FlatListλ°SectionList: νμ¬ λ³΄μ΄λ νλͺ©λ§ λ λλ§νμ¬ λκ·λͺ¨ λͺ©λ‘κ³Ό 그리λλ₯Ό ν¨μ¨μ μΌλ‘ λ λλ§νκΈ° μν΄ μ΄ μ»΄ν¬λνΈλ€μ μ¬μ©ν©λλ€.- JavaScript μ컀 λλ λ€μ΄ν°λΈ λͺ¨λμ μ¬μ©ν μ€νμ€λ λ μ²λ¦¬: κ³μ° μ§μ½μ μΈ μμ μ JavaScript μ컀λ λ€μ΄ν°λΈ λͺ¨λμ μ¬μ©νμ¬ λ³λμ μ€λ λλ‘ μ€νλ‘λνμ¬ λ©μΈ μ€λ λλ₯Ό μ°¨λ¨νλ κ²μ λ°©μ§ν©λλ€.
React Nativeμλ μμ§ experimental_Offscreenμ μ§μ μ μΈ λ±κ°λ¬Όμ΄ μμ§λ§, μ΄λ¬ν κΈ°μ λ€μ λΆνμν 리λ λλ§μ μ€μ΄κ³ λΉμ©μ΄ λ§μ΄ λλ κ³μ°μ λ°±κ·ΈλΌμ΄λλ‘ μ€νλ‘λνμ¬ μ μ¬ν μ±λ₯ ν₯μμ λ¬μ±νλ λ° λμμ΄ λ μ μμ΅λλ€.
κ΅μ μ ꡬν μ¬λ‘
experimental_Offscreenκ³Ό λ°±κ·ΈλΌμ΄λ λ λλ§μ μμΉμ λ€μν μ°μ
κ³Ό μ§μμ μ ν리μΌμ΄μ
μ μ μ©λ μ μμ΅λλ€. λ€μμ λͺ κ°μ§ μμ
λλ€:
- μ μμκ±°λ (κΈλ‘λ²): λ λΉ λ₯Έ νμμ μν΄ μ ν μμΈ νμ΄μ§λ₯Ό λ°±κ·ΈλΌμ΄λμμ 미리 λ λλ§ν©λλ€. λ€μν μΈμ΄ λ²μ μ μ€νμ€ν¬λ¦°μΌλ‘ 미리 λ λλ§νμ¬ νμ§νλ μ ν μ 보(ν΅ν, μΈμ΄, λ°°μ‘ μ΅μ )λ₯Ό μννκ² νμν©λλ€.
- κΈμ΅ λμ보λ (λΆλ―Έ, μ λ½, μμμ): λνν λ°μ΄ν° μκ°νλ₯Ό μν΄ λ³΅μ‘ν κΈμ΅ μ°¨νΈλ₯Ό μ€νμ€ν¬λ¦°μμ 미리 κ³μ°νκ³ λ λλ§ν©λλ€. μ€μκ° μμ₯ λ°μ΄ν° μ λ°μ΄νΈκ° μ±λ₯ μ ν μμ΄ νμλλλ‘ λ³΄μ₯ν©λλ€.
- μμ λ―Έλμ΄ νλ«νΌ (μ μΈκ³): μνν μ€ν¬λ‘€ κ²½νμ μν΄ λ΄μ€ νΌλ μ½ν μΈ λ₯Ό λ°±κ·ΈλΌμ΄λμμ 미리 κ°μ Έμ λ λλ§ν©λλ€. νλ«νΌμ λ€λ₯Έ μΉμ (μ: νλ‘ν, κ·Έλ£Ή, λ©μμ§) κ°μ λΆλλ¬μ΄ μ νμ ꡬνν©λλ€.
- μ¬ν μμ½ μΉμ¬μ΄νΈ (κΈλ‘λ²): λ λΉ λ₯Έ μλ΅ μκ°μ μν΄ νκ³΅νΈ λ° νΈν κ²μ κ²°κ³Όλ₯Ό λ°±κ·ΈλΌμ΄λμμ 미리 λ‘λν©λλ€. λνν μ§λμ λͺ©μ μ§ κ°μ΄λλ₯Ό ν¨μ¨μ μΌλ‘ νμν©λλ€.
- μ¨λΌμΈ κ΅μ‘ νλ«νΌ (μμμ, μν리카, λ¨λ―Έ): λ μνν νμ΅ κ²½νμ μν΄ λνν νμ΅ λͺ¨λκ³Ό νκ°λ₯Ό λ°±κ·ΈλΌμ΄λμμ 미리 λ λλ§ν©λλ€. μ¬μ©μμ μΈμ΄μ λ¬Ένμ μ νΈλμ λ°λΌ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό μ‘°μ ν©λλ€.
κ²°λ‘
experimental_Offscreenμ React μ±λ₯ μ΅μ νμμ μ€μν μ§μ μ λνλ
λλ€. λ°±κ·ΈλΌμ΄λ λ λλ§μ νμ©ν¨μΌλ‘μ¨ κ°λ°μλ 볡μ‘ν μ ν리μΌμ΄μ
μμλ λ λ°μμ± μκ³ λ§€λ ₯μ μΈ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό λ§λ€ μ μμ΅λλ€. APIλ μμ§ μ€ν λ¨κ³μ΄μ§λ§ κ·Έ μ μ¬μ μΈ μ΄μ μ λΆμΈν μ μμ΅λλ€. μ΄ κ°μ΄λμ μ€λͺ
λ κ°λ
, ꡬν μΈλΆ μ 보 λ° λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄ν¨μΌλ‘μ¨ experimental_Offscreenμ νμνκ³ κ·Έ νμ νμ©νμ¬ React μ ν리μΌμ΄μ
μ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€. APIκ° λ°μ ν¨μ λ°λΌ μ² μ ν ν
μ€νΈνκ³ μ½λλ₯Ό μμ ν μ€λΉλ₯Ό ν΄μΌ ν©λλ€.
React μνκ³κ° κ³μ λ°μ ν¨μ λ°λΌ experimental_Offscreenκ³Ό κ°μ λꡬλ νμν μ¬μ©μ κ²½νμ μ 곡νλ λ° μ μ λ μ€μν μν μ ν κ²μ
λλ€. μ΄λ¬ν λ°μ μ λν μ 보λ₯Ό μ μ§νκ³ μ΄λ₯Ό μμ©ν¨μΌλ‘μ¨ κ°λ°μλ μ¬μ©μμ μμΉλ μ₯μΉμ κ΄κ³μμ΄ μ ν리μΌμ΄μ
μ΄ μ±λ₯μ΄ λ°μ΄λκ³ λ°μμ±μ΄ μ’μΌλ©° μ¦κ²κ² μ¬μ©ν μ μλλ‘ λ³΄μ₯ν μ μμ΅λλ€.