Reactμ μ€νμ hookμΈ experimental_useOpaqueIdentifierλ₯Ό νμνμΈμ. κ³ μ ν λΆν¬λͺ μλ³μ μμ± λ°©λ², μ₯μ , μ¬μ© μ¬λ‘ λ° κΈλ‘λ² μ ν리μΌμ΄μ κ³ λ € μ¬νμ μμλ΄ λλ€. μ€μ©μ μΈ μμ μ μ€ν κ°λ₯ν ν΅μ°°λ ₯μ ν¬ν¨ν©λλ€.
Reactμ experimental_useOpaqueIdentifier: λΆν¬λͺ ID μμ± μ¬μΈ΅ λΆμ
μ¬μ©μ μΈν°νμ΄μ€ ꡬμΆμ μν JavaScript λΌμ΄λΈλ¬λ¦¬μΈ Reactλ λμμμ΄ λ°μ νκ³ μμ΅λλ€. μμ μ μΈ κΈ°λ₯λ μ€μνμ§λ§, μ€νμ μΈ APIλ λ―Έλλ₯Ό μΏλ³Ό κΈ°νλ₯Ό μ 곡ν©λλ€. κ·Έλ¬ν μ€νμ κΈ°λ₯ μ€ νλκ° experimental_useOpaqueIdentifierμ
λλ€. μ΄ λΈλ‘κ·Έ κ²μλ¬Όμμλ μ΄ ν₯λ―Έλ‘μ΄ APIλ₯Ό μ¬μΈ΅μ μΌλ‘ λΆμνλ©°, κ·Έ λͺ©μ , μ¬μ© μ¬λ‘, μ΄μ λ° κΈλ‘λ² μ ν리μΌμ΄μ
μ μν μ£Όμ κ³ λ € μ¬νμ νꡬν©λλ€.
λΆν¬λͺ μλ³μ μ΄ν΄νκΈ°
experimental_useOpaqueIdentifierλ₯Ό μ΄ν΄λ³΄κΈ° μ μ λΆν¬λͺ
μλ³μμ κ°λ
μ νμ
νλ κ²μ΄ μ€μν©λλ€. λΆν¬λͺ
μλ³μλ λ΄λΆ ꡬ쑰λ μλ―Έλ₯Ό λλ¬λ΄μ§ μλ κ³ μ ν λ¬Έμμ΄μ
λλ€. λ³Έμ§μ μΌλ‘ λΆν¬λͺ
νκ² μμ±λ IDμ΄λ©°, μ μΌν λͺ©μ μ κ³ μ ν μ°Έμ‘°λ₯Ό μ 곡νλ κ²μ
λλ€. μ μ¬μ μΌλ‘ λ―Όκ°ν μ 보λ ꡬν μΈλΆ μ 보λ₯Ό λ
ΈμΆν μ μλ μΌλ° μλ³μμ λ¬λ¦¬, λΆν¬λͺ
μλ³μλ κ°μΈ μ 보 λ³΄νΈ λ° λ³΄μμ μν΄ μ€κ³λμμ΅λλ€.
무μμλ‘ μμ±λ μΌλ ¨λ²νΈμ κ°λ€κ³ μκ°νλ©΄ λ©λλ€. μΌλ ¨λ²νΈμ μΆμ²λ μμ± λ Όλ¦¬λ₯Ό μ νμ μμ΄ νμ©ν μ μμ΅λλ€. κ·Έ κ°μΉλ μ€λ‘μ§ κ³ μ μ±μ μμ΅λλ€.
experimental_useOpaqueIdentifier μκ°
experimental_useOpaqueIdentifierλ React μ»΄ν¬λνΈ λ΄μμ μ΄λ¬ν κ³ μ ν λΆν¬λͺ
μλ³μλ₯Ό μμ±νλλ‘ μ€κ³λ React Hookμ
λλ€. μ»΄ν¬λνΈ λ λλ§ λ΄μμ νΈμΆλ λλ§λ€ κ³ μ μ±μ΄ 보μ₯λλ λ¬Έμμ΄μ μ 곡ν©λλ€. μ΄λ λ€μν μ¬μ© μ¬λ‘μμ λ§€μ° μ μ©ν μ μμΌλ©°, νΉν μ§μ ID μμ±μ κ΄λ¦¬ν νμ μμ΄ μμ μ μ΄κ³ μμΈ‘ λΆκ°λ₯ν μλ³μκ° νμν λ μ μ©ν©λλ€.
μ£Όμ νΉμ§:
- κ³ μ μ±: κ° μλ³μκ° μ»΄ν¬λνΈ λ λλ§ λ΄μμ κ³ μ ν¨μ 보μ₯ν©λλ€.
- λΆν¬λͺ μ±: μλ³μμ νμκ³Ό κΈ°λ³Έ κ΅¬μ‘°κ° λ ΈμΆλμ§ μμ΅λλ€.
- μμ μ±: μ»΄ν¬λνΈκ° λ§μ΄νΈ ν΄μ λκ³ λ€μ λ§μ΄νΈλμ§ μλ ν, λμΌν μ»΄ν¬λνΈ μΈμ€ν΄μ€μ 리λ λλ§ μ λ°μ κ±Έμ³ μλ³μκ° μΌκ΄λκ² μ μ§λ©λλ€.
- μ€νμ : μ΄ APIλ λ³κ²½λ μ μμΌλ©° μμ§ React μνκ³μ μμ μ μΈ λΆλΆμΌλ‘ κ°μ£Όλμ§ μμ΅λλ€. μ£Όμν΄μ μ¬μ©νμΈμ.
experimental_useOpaqueIdentifier μ¬μ©μ μ΄μ
experimental_useOpaqueIdentifierλ₯Ό μ¬μ©νλ©΄ React μ ν리μΌμ΄μ
μ μ¬λ¬ κ°μ§ μ΄μ μ μ»μ μ μμ΅λλ€:
1. μ±λ₯ ν₯μ
κ³ μ μλ³μλ₯Ό μμ±ν¨μΌλ‘μ¨ λ λλ§ μ±λ₯μ μ΅μ νν μ μμ΅λλ€. Reactκ° κ°μ DOMκ³Ό μ€μ DOMμ μ‘°μ ν λ, μλ³μλ₯Ό μ¬μ©νμ¬ μ΄λ€ μμκ° λ³κ²½λμλμ§ μλ³ν©λλ€. κ³ μ νκ³ μμ μ μΈ μλ³μλ₯Ό μ¬μ©νλ©΄ Reactκ° DOMμ νμν λΆλΆλ§ ν¨μ¨μ μΌλ‘ μ λ°μ΄νΈν μ μμ΄ λ λΆλλ¬μ΄ μ¬μ©μ κ²½νμ μ 곡ν©λλ€. μ¬λ¬ λλ₯μ κ³ κ°μκ² μλΉμ€λ₯Ό μ 곡νλ κΈλ‘λ² μ μμκ±°λ νλ«νΌμ μκ°ν΄ 보μΈμ. μ΅μ νλ λ λλ§μ νΉν μΈν°λ· μ°κ²°μ΄ λλ¦° μ¬μ©μμκ² λ°μμ± μκ³ μνν μΌν κ²½νμ μν΄ λ§€μ° μ€μν©λλ€.
2. μ κ·Όμ± ν₯μ
μ κ·Όμ±μ ν¬μ©μ λμμΈμ ν΅μ¬μ
λλ€. experimental_useOpaqueIdentifierλ ARIA μμ±(μ: aria-labelledby λλ aria-describedby)μ λν κ³ μ IDλ₯Ό λ§λλ λ° μ¬μ©ν μ μμ΅λλ€. μ΄λ μ€ν¬λ¦° 리λκ° μμλ₯Ό μ ννκ² μλ³νκ³ μ€λͺ
νλ λ° λμμ μ£Όμ΄ μ₯μ κ° μλ μ¬μ©μμκ² λ λμ κ²½νμ 보μ₯ν©λλ€. μλ₯Ό λ€μ΄, λ€μν μ§μμ μλ―Όλ€μκ² μλΉμ€λ₯Ό μ 곡νλ μΉμ¬μ΄νΈλ μ¬μ©μμ λ₯λ ₯μ΄λ μμΉμ κ΄κ³μμ΄ λͺ¨λ μ¬λμ΄ μ½ν
μΈ μ μ κ·Όν μ μλλ‘ ν΄μΌ ν©λλ€.
3. κ°μνλ μν κ΄λ¦¬
κ³ μ νκ² μλ³λ μ»΄ν¬λνΈλ₯Ό λ€λ£° λ μν κ΄λ¦¬κ° λ κ°λ¨ν΄μ§λλ€. ID μΆ©λμ΄λ 볡μ‘ν ID μμ± λ‘μ§μ λν΄ κ±±μ ν νμ μμ΄ μ»΄ν¬λνΈ μΈμ€ν΄μ€μ λν ν€λ₯Ό μμ±ν μ μμ΅λλ€. μ΄λ νΉν 볡μ‘ν μ»΄ν¬λνΈ κ³μΈ΅ ꡬ쑰λ₯Ό κ°μ§ 볡μ‘ν μ ν리μΌμ΄μ μμ λλ²κΉ κ³Ό μ μ§λ³΄μλ₯Ό κ°μνν©λλ€. μ¬μ©μλ€μ΄ λ€μν μ½ν μΈ λ₯Ό μμ±ν μ μλ λκ·λͺ¨ κ΅μ μμ λ―Έλμ΄ νλ«νΌμ μμν΄ λ³΄μΈμ. ν¨μ¨μ μΈ μν κ΄λ¦¬λ λͺ¨λ μ νμ μ¬μ©μ μνΈ μμ©μ μ²λ¦¬νλ λ° λ§€μ° μ€μν©λλ€.
4. 보μ λ° κ°μΈμ 보 λ³΄νΈ κ°ν
λΆν¬λͺ μλ³μλ μμκ° κ΅¬μ±λλ λ°©μκ³Ό κ΄λ ¨λ λ΄λΆ ꡬν μΈλΆ μ 보λ μ μ¬μ μΌλ‘ λ―Όκ°ν μ 보μ λ ΈμΆμ νΌν¨μΌλ‘μ¨ μΆκ°μ μΈ λ³΄μ κ³μΈ΅μ μ 곡ν©λλ€. μ΄λ ID μμ± λ°©μμ μμΈ‘ κ°λ₯μ±μ νμ μΌλ‘ μΌμ μ μλ νΉμ μ νμ 곡격μΌλ‘λΆν° μ ν리μΌμ΄μ μ 보νΈνλ λ° λμμ΄ λ©λλ€. μ΄λ μ μΈκ³ μ¬μ©μμ κ°μΈ μ 보λ κΈμ΅ μ 보μ κ°μ λ―Όκ°ν λ°μ΄ν°λ₯Ό λ€λ£° λ νμμ μ λλ€.
experimental_useOpaqueIdentifierμ μ¬μ© μ¬λ‘
experimental_useOpaqueIdentifier hookμλ μ¬λ¬ μ€μ©μ μΈ μμ© λΆμΌκ° μμ΅λλ€:
1. λμ μΌλ‘ μμ±λλ μμ
볡μ‘ν μμ, νΉν λμ νλκ° μλ μμμ λ§λ€ λ κ³ μ μλ³μλ μ λ ₯ μμ, λ μ΄λΈ λ° κ΄λ ¨ ARIA μμ±μ κ΄λ¦¬νλ λ° νμμ μ λλ€. μ΄λ₯Ό ν΅ν΄ μμμ μ κ·Όμ±μ λμ΄κ³ κ΄λ¦¬λ₯Ό λ μ½κ² ν μ μμ΅λλ€. μ΄λ μ μΈκ³ μ λΆμ ν΄λΉλλ©°, μ¬λ¬ μΈμ΄λ‘ λ μμ λμμΈμ ν¬ν¨νμ¬ λͺ¨λ μμμ΄ μλ―Όλ€μκ² μ κ·Ό κ°λ₯νλλ‘ λ³΄μ₯ν΄μΌ ν©λλ€.
μμ:
import React, { experimental_useOpaqueIdentifier } from 'react';
function DynamicFormField({ label, type }) {
const id = experimental_useOpaqueIdentifier();
return (
<div>
<label htmlFor={id}>{label}</label>
<input type={type} id={id} />
</div>
);
}
function MyForm() {
return (
<div>
<DynamicFormField label="First Name" type="text" />
<DynamicFormField label="Email" type="email" />
</div>
);
}
2. μ κ·Όμ± μλ μ»΄ν¬λνΈ λμμΈ
λͺ¨λ React μ»΄ν¬λνΈκ° μ κ·Όμ± νμ€μ μ€μνλλ‘ νμΈμ. κ³ μ IDλ₯Ό μ¬μ©νμ¬ μμμ ARIA μμ±μ μ°κ²°νλ©΄ μ€ν¬λ¦° 리λκ° UIλ₯Ό μ¬λ°λ₯΄κ² ν΄μνκ³ μ€λͺ νλ λ° λμμ΄ λ©λλ€. μλ₯Ό λ€μ΄, κΈλ‘λ² μ‘°μ§μ μΉμ¬μ΄νΈμμ μ΄ κΈ°λ₯μ μ¬μ©νμ¬ μ κ·Όμ± κ°μ΄λλΌμΈ μ€μλ₯Ό 보μ₯ν μ μμ΅λλ€.
μμ:
import React, { experimental_useOpaqueIdentifier } from 'react';
function AccessibleButton({ label, describedby }) {
const id = experimental_useOpaqueIdentifier();
return (
<button aria-labelledby={id} aria-describedby={describedby}>
<span id={id}>{label}</span>
</button>
);
}
function MyComponent() {
return (
<div>
<AccessibleButton label="Click Me" describedby="description" />
<p id="description">This button performs an action.</p>
</div>
);
}
3. λͺ©λ‘ λ° κ·Έλ¦¬λ κ΄λ¦¬
κ³ μ IDλ λμ λͺ©λ‘μ΄λ 그리λλ₯Ό λ λλ§ν λ λ§€μ° μ μ©νλ©°, Reactκ° λ³κ²½λ νλͺ©λ§ ν¨μ¨μ μΌλ‘ μλ³νκ³ μ λ°μ΄νΈν μ μκ² ν΄μ€λλ€. μ¬λ¬ κ΅κ°μ μ μμκ±°λ μ¬μ΄νΈλ λ°μ΄ν° μκ°ν λμ보λλ μ΄λ₯Ό νμ©νμ¬ λ λΆλλ¬μ΄ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.
μμ:
import React, { experimental_useOpaqueIdentifier } from 'react';
function ListItem({ item }) {
const id = experimental_useOpaqueIdentifier();
return (
<li key={id}>{item}</li>
);
}
function MyList({ items }) {
return (
<ul>
{items.map((item) => (
<ListItem key={item} item={item} />
))}
</ul>
);
}
4. 볡μ‘ν UI μμ ꡬμ±
μ ν리μΌμ΄μ μ΄ μ±μ₯ν¨μ λ°λΌ 볡μ‘ν UI μμλ μ’ μ’ λ§μ μμ μ»΄ν¬λνΈλ‘ ꡬμ±λ©λλ€. κ³ μ IDλ μ»΄ν¬λνΈμ μ μ ν ν΅ν©μ 보μ₯νκ³ ID μΆ©λμ λ°©μ§νμ¬ μ½λλ² μ΄μ€μ μ μ§λ³΄μμ±μ ν₯μμν΅λλ€. κΈλ‘λ² μννΈμ¨μ΄ νμ¬λ μ»΄ν¬λνΈμ κ³ μ IDλ₯Ό ꡬννμ¬ μ½λλ² μ΄μ€λ₯Ό μ΅μ ννκ³ μ μ¬μ μΈ μΆ©λμ μ€μ΄λ μ΄μ μ μ»μ μ μμ΅λλ€.
5. μ΄λ²€νΈ μΆμ λ° λΆμ
κ³ μ μλ³μλ λΆμμ μν΄ μΆμ ν μ μλ μ΄λ²€νΈμμ μ μ©ν μ 보λ₯Ό μ 곡ν μ μμ΅λλ€. κ³ μ μμλ₯Ό κ³ μ μ΄λ²€νΈμ μ°κ²°νκ³ μ¬μ©μκ° μΉμ¬μ΄νΈμ μνΈ μμ©νλ λ°©μμ μΆμ ν μ μμ΅λλ€. μ΄λ μΉμ¬μ΄νΈμ μ ν리μΌμ΄μ μ λ°μ μ΅μ νμ λ§€μ° μ€μν μ μμ΅λλ€.
ꡬν μΈλΆ μ 보 λ° μ½λ μμ
experimental_useOpaqueIdentifier hookμ μ¬μ©νλ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€:
import React, { experimental_useOpaqueIdentifier } from 'react';
function MyComponent() {
const id = experimental_useOpaqueIdentifier();
return (
<div id={id}>
<p>This is a component with a unique ID.</p>
</div>
);
}
μ΄ μμμμ MyComponentμ κ° μΈμ€ν΄μ€λ div μμμ ν λΉλ κ³ μ IDλ₯Ό κ°κ² λ©λλ€. μ΄ IDλ λμΌν μ»΄ν¬λνΈ μΈμ€ν΄μ€μ 리λ λλ§ μ λ°μ κ±Έμ³ μΌμ νκ² μ μ§λ©λλ€. μ¬μ©μκ° μμ±ν λκΈμ νμνλ μΉμ
μ΄ μλ λ΄μ€ μΉμ¬μ΄νΈλ₯Ό μκ°ν΄ 보μΈμ. experimental_useOpaqueIdentifierλ κ° μ»΄ν¬λνΈ μΈμ€ν΄μ€κ° μ¬λ°λ₯Έ λκΈ μ€λ λμ μ ννκ² μ°κ²°λλλ‘ λ³΄μ₯ν©λλ€. μ΄λ μ¬μ©μμ λκΈμ΄ λ€μν μ§μμμ μ¬ κ°λ₯μ±μ΄ λμ λ€κ΅μ΄ μΉμ¬μ΄νΈμμ νΉν μ μ©ν©λλ€.
μ£Όμ κ³ λ € μ¬ν λ° λͺ¨λ² μ¬λ‘
experimental_useOpaqueIdentifierλ μ΄μ μ μ 곡νμ§λ§ λ€μ μ¬νμ λͺ
μ¬ν΄μΌ ν©λλ€:
1. μ€νμ API κ²½κ³
μ΄κ²μ μ€νμ APIμ΄λ―λ‘ μκ³ μμ΄ λ³κ²½λ μ μλ€λ μ μ μ μνμΈμ. React μ
λ°μ΄νΈ μ μ½λκ° μμλ μ μμ΅λλ€. experimental_useOpaqueIdentifierμ ν¬κ² μμ‘΄νλ κ²½μ°, APIκ° λ³κ²½λ λ μ½λλ₯Ό μμ ν μ€λΉλ₯Ό ν΄μΌ ν©λλ€. μ격ν ν
μ€νΈλ₯Ό μννκ³ React νμ μλ‘μ΄ λ¦΄λ¦¬μ€λ₯Ό λͺ¨λν°λ§νλ κ²μ΄ μ€μν©λλ€.
2. λΈλΌμ°μ νΈνμ±
λΈλΌμ°μ νΈνμ±μ νμΈνμΈμ. hook μμ²΄κ° μ£Όλ‘ μμ±μ μ¬μ©νλ λ¬Έμμ΄μ μμ±νλ―λ‘ μΌλ°μ μΌλ‘ λ¬Έμ κ° λμ§λ μμ§λ§, νΉν κΈλ‘λ² κ³ κ°μ λμμΌλ‘ ν λλ λ€μν λΈλΌμ°μ μ μ₯μΉμμ μ ν리μΌμ΄μ μ ν μ€νΈνλ κ²μ΄ μ’μ΅λλ€.
3. λ¨μ© λ°©μ§
μ μ©νμ§λ§ μ΄ hookμ λ¨μ©νμ§ λ§μΈμ. λͺ¨λ κ³³μ λ§Ήλͺ©μ μΌλ‘ μ μ©νμ§ λ§μΈμ. DOMμ μμ, ARIA μμ± λλ νΉμ μν κ΄λ¦¬ μꡬμ λν΄ μ§μ μΌλ‘ κ³ μ νκ³ μμ μ μΈ μλ³μκ° νμν λλ§ μ¬μ©νμΈμ.
4. ν μ€νΈ
λ¨μ λ° ν΅ν© ν μ€νΈλ‘ μ½λλ₯Ό μ² μ ν ν μ€νΈνμΈμ. μμ±λ μλ³μμ κ³ μ μ±κ³Ό μμ μ±μ νμΈνκ³ , νΉν 볡μ‘ν μ»΄ν¬λνΈ κ³μΈ΅ ꡬ쑰μμ μ¬μ©ν λ μ£ΌμνμΈμ. κ΅μ μ μΈ κ³ κ°μ μΌλμ λ ν¨κ³Όμ μΈ ν μ€νΈ μ λ΅μ μ¬μ©νμΈμ.
5. μ±λ₯ κ³ λ € μ¬ν
μ±λ₯ ν₯μμ λͺ©μ μΌλ‘ νμ§λ§, experimental_useOpaqueIdentifierμ κ³Όλν μ¬μ©μ΄λ μλͺ»λ ꡬνμ μ μ¬μ μΌλ‘ μ±λ₯ λ³λͺ© νμμ μ λ°ν μ μμ΅λλ€. hookμ μΆκ°ν ν μ ν리μΌμ΄μ
μ λ λλ§ λμμ λΆμνμΈμ. κ°λ₯ν κ²½μ° React νλ‘νμΌλ§ λꡬλ₯Ό μ¬μ©νμ¬ μ±λ₯ λ¬Έμ λ₯Ό μλ³νκ³ ν΄κ²°νμΈμ.
6. μν κ΄λ¦¬
μμ±λ μλ³μλ λμΌν μ»΄ν¬λνΈ μΈμ€ν΄μ€ λ΄μμλ§ κ³ μ νλ€λ μ μ κΈ°μ΅νμΈμ. μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμ λμΌν μ»΄ν¬λνΈμ μ¬λ¬ μΈμ€ν΄μ€κ° μλ κ²½μ°, κ°κ° κ³ μ ν μλ³μλ₯Ό κ°κ² λ©λλ€. λ°λΌμ μ΄λ¬ν μλ³μλ₯Ό μ μ μν κ΄λ¦¬λ λ°μ΄ν°λ² μ΄μ€ ν€μ λμ²΄λ¬Όλ‘ μ¬μ©νμ§ λ§μΈμ.
κΈλ‘λ² μ ν리μΌμ΄μ κ³ λ € μ¬ν
κΈλ‘λ² λ§₯λ½μμ experimental_useOpaqueIdentifierλ₯Ό μ¬μ©ν λ λ€μμ κ³ λ €νμΈμ:
1. κ΅μ ν(i18n) λ° νμ§ν(l10n)
experimental_useOpaqueIdentifierλ i18n/l10nκ³Ό μ§μ μ μΌλ‘ μνΈ μμ©νμ§ μμ§λ§, μμ±λ μλ³μλ₯Ό μ°Έμ‘°νλ λ μ΄λΈ, μ€λͺ
λ° κΈ°ν μ½ν
μΈ κ° λ€λ₯Έ λ‘μΌμΌμ λ§κ² μ¬λ°λ₯΄κ² λ²μλμλμ§ νμΈνμΈμ. ARIA μμ±μ μμ‘΄νλ μ κ·Όμ± μλ μ»΄ν¬λνΈλ₯Ό λ§λλ κ²½μ°, μ΄λ¬ν μμ±μ΄ λ€λ₯Έ μΈμ΄μ νΈνλλμ§ νμΈνμΈμ. μλ₯Ό λ€μ΄, κΈλ‘λ² λΉμ¦λμ€λ μ κ·Όμ±μ μν΄ λͺ¨λ μ€λͺ
μ λ²μν κ²μ
λλ€.
2. μ€λ₯Έμͺ½μμ μΌμͺ½(RTL) μΈμ΄
μ ν리μΌμ΄μ μ΄ μλμ΄λ νλΈλ¦¬μ΄μ κ°μ΄ ν μ€νΈκ° μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ λ λλ§λλ μΈμ΄λ₯Ό μ§μνλ κ²½μ°, μ»΄ν¬λνΈ λ μ΄μμκ³Ό μ€νμΌλ κ·Έμ λ§κ² μ‘°μ λμ΄μΌ ν©λλ€. ID μ체λ λ μ΄μμ λ°©ν₯μ μ§μ μ μΈ μν₯μ λ―ΈμΉμ§ μμ§λ§, RTL λμμΈ μμΉμ μ‘΄μ€νλ λ°©μμΌλ‘ μμμ μ μ©λμ΄μΌ ν©λλ€. μλ₯Ό λ€μ΄, κΈλ‘λ² μλ§€ νλ«νΌμ μ¬μ©μ μΈμ΄ μ€μ μ λ°λΌ λ μ΄μμμ΄ λ³κ²½λλ μ»΄ν¬λνΈλ₯Ό κ°μ§ κ²μ λλ€.
3. μκ°λ λ° λ μ§/μκ° νμ
μ΄ hookμ μκ°λλ λ μ§/μκ° νμκ³Ό μ§μ μ μΈ κ΄λ ¨μ΄ μμ΅λλ€. κ·Έλ¬λ IDκ° μ¬μ©λ λ§₯λ½μ κ³ λ €νμΈμ. μλ₯Ό λ€μ΄, μΊλ¦°λ μ ν리μΌμ΄μ μ ꡬμΆνλ κ²½μ°, λ€μν μκ°λμ μλ μ¬μ©μμκ² μ μ ν λ μ§/μκ° κΈ°λ₯μ μ 곡ν΄μΌ ν©λλ€. μλ³μ μ체λ λ μ§ λ° μκ°κ³Ό 무κ΄ν©λλ€.
4. ν΅ν λ° μ«μ νμ
μμ λ§μ°¬κ°μ§λ‘ μ΄ hookμ ν΅νλ μ«μ νμμ μ§μ μ μΈ μν₯μ λ―ΈμΉμ§ μμ΅λλ€. κ·Έλ¬λ μ ν리μΌμ΄μ μ΄ κΈμ‘μ΄λ κΈ°ν μ«μ λ°μ΄ν°λ₯Ό νμνλ κ²½μ°, κ° μ§μ, κ΅κ° λ° μΈμ΄μ λ§κ² ν΄λΉ ν΅ν κΈ°νΈ, μμμ κ΅¬λΆ κΈ°νΈ λ° μλ¦Ώμ κ΅¬λΆ κΈ°νΈλ₯Ό μ‘΄μ€νμ¬ μ¬λ°λ₯΄κ² νμμ΄ μ§μ λμλμ§ νμΈνμΈμ. μ μΈκ³μμ μ΄μλλ κ²°μ κ²μ΄νΈμ¨μ΄λ λͺ¨λ μ’ λ₯μ ν΅νλ₯Ό μ§μν μ μμ΄μΌ ν©λλ€.
5. μ κ·Όμ± λ° ν¬μ©μ±
μ΄ hookμ κ³ μ ν ARIA IDλ₯Ό λ§λλ λ° λμμ΄ λλ―λ‘ μ κ·Όμ±κ³Ό ν¬μ©μ±μ μ°μ μνμΈμ. μ»΄ν¬λνΈκ° μ κ·Όμ± κ°μ΄λλΌμΈ(WCAG)μ μ€μνκ³ μμΉλ λ°°κ²½μ κ΄κ³μμ΄ μ₯μ κ° μλ μ¬λλ€μ΄ μ¬μ©ν μ μλλ‘ νμΈμ. κΈλ‘λ² μ‘°μ§μ μ΄λ¬ν κ°μ΄λλΌμΈμ μ€μν΄μΌ ν©λλ€.
κ²°λ‘
experimental_useOpaqueIdentifierλ React ν΄ν·μ μΆκ°λ κ°μΉ μλ κΈ°λ₯μΌλ‘, κ°λ°μκ° μ»΄ν¬λνΈ λ΄μμ κ³ μ νκ³ λΆν¬λͺ
ν μλ³μλ₯Ό μμ±ν μ μκ² ν΄μ€λλ€. μ΄λ μ±λ₯μ κ°μ νκ³ , μ κ·Όμ±μ ν₯μμν€λ©°, μν κ΄λ¦¬λ₯Ό κ°μνν μ μμ΅λλ€. APIμ μ€νμ μ±κ²©μ κ³ λ €νκ³ , μ½λλ₯Ό μ² μ ν ν
μ€νΈνλ©°, νΉν κ΅μ νλ μ ν리μΌμ΄μ
μμλ λͺ¨λ² μ¬λ‘λ₯Ό μ€μν΄μΌ ν¨μ κΈ°μ΅νμΈμ.
μμ§ λ°μ μ€μ΄μ§λ§, experimental_useOpaqueIdentifierλ νλμ μΈ μΉ μ ν리μΌμ΄μ
ꡬμΆμ μν κ°λ ₯νκ³ μ μ°ν λꡬλ₯Ό μ 곡νλ €λ Reactμ λ
Έλ ₯μ 보μ¬μ€λλ€. μ±
μκ° μκ² μ¬μ©νκ³ κ·Έ μ΄μ μ νμ©νμ¬ React νλ‘μ νΈλ₯Ό κ°μ νμΈμ.
μ€ν κ°λ₯ν ν΅μ°°λ ₯:
- React μ»΄ν¬λνΈμμ κ³ μ νκ³ μμ μ μΈ μλ³μκ° νμν λ
experimental_useOpaqueIdentifierλ₯Ό μ¬μ©νμΈμ. - ARIA μμ±μ μλ³μλ₯Ό μ¬μ©νμ¬ μ κ·Όμ±μ μ°μ μνμΈμ.
- μ½λλ₯Ό μ² μ ν ν μ€νΈνμΈμ.
- κΈλ‘λ² μ ν리μΌμ΄μ μ μν΄ κ΅μ ν λ° νμ§ν λͺ¨λ² μ¬λ‘λ₯Ό κ³ λ €νμΈμ.
- μ μ¬μ μΈ API λ³κ²½μ λλΉνμΈμ.