useId γ―γγ’γ―γ»γ·γγͺγγ£ε±ζ§γ«ζΈ‘γγγ¨γγ§γγδΈζοΏ½? ID γηζγγγγοΏ½? React γγγ―γ§γγ
const id = useId()γͺγγ‘γ¬γ³γΉ
useId()
γ³γ³γγΌγγ³γοΏ½?γγγγ¬γγ«γ§ useId γεΌγ³εΊγγ¦γδΈζοΏ½? ID γηζγγΎγγ
import { useId } from 'react';
function PasswordField() {
const passwordHintId = useId();
// ...εΌζ°
useId γ―εΌζ°γεγεγγΎγγγ
θΏγε€
useId γ―γηΉοΏ½?οΏ½οΏ½?γ³γ³γγΌγγ³γε
γ§γοΏ½?ηΉοΏ½?οΏ½οΏ½? useId οΏ½?εΌγ³εΊγγ«ι’ι£δ»γγγγγδΈζοΏ½? ID ζεεγθΏγγΎγγ
注ζηΉ
-
useIdγ―γγγ―γ§γγγγγγ³γ³γγΌγγ³γοΏ½?γγγγ¬γγ«γΎγγ―η¬θͺοΏ½?γγγ―ε γ§οΏ½?γΏεΌγ³εΊγγγ¨γγ§γγΎγγγ«γΌγγΎγγ―ζ‘δ»Άεε²ε γ§εΌγ³εΊγγγ¨γ―γ§γγΎγγγγγεΏ θ¦γͺε ΄εγ―γζ°γγγ³γ³γγΌγγ³γγδ½ζγγηΆζ γ移εγγγεΏ θ¦γγγγΎγγ -
useIdγγγͺγΉγε οΏ½? key οΏ½?ηζγ«γ―δ½Ώη¨γγͺγγ§γγ γγγkey γ―γγΌγΏγγηζγγγεΏ θ¦γγγγΎγγ
δ½Ώη¨ζ³
γ’γ―γ»γ·γγͺγγ£ε±ζ§οΏ½?γγοΏ½?δΈζοΏ½? ID οΏ½?ηζ
γ³γ³γγΌγγ³γοΏ½?γγγγ¬γγ«γ§ useId γεΌγ³εΊγγ¦γδΈζοΏ½? ID γηζγγΎγγ
import { useId } from 'react';
function PasswordField() {
const passwordHintId = useId();
// ...γοΏ½?εΎγηζγγγ ID γγγΎγγΎγͺε±ζ§γ«ζΈ‘γγγ¨γγ§γγΎγγ
<>
<input type="password" aria-describedby={passwordHintId} />
<p id={passwordHintId}>
</>γγγγ©οΏ½?γγγͺε ΄εγ«ε½Ήη«γ€γγγδΎγιγγ¦γΏγ¦γΏγΎγγγγ
aria-describedby οΏ½?γγγͺ HTML γ’γ―γ»γ·γγͺγγ£ε±ζ§γδ½Ώη¨γγγ¨γ2 γ€οΏ½?γΏγ°γηΈδΊγ«ι’ι£γγ¦γγγγ¨γζοΏ½?οΏ½γγγγ¨γγ§γγΎγγδΎγγ°γε
₯εγγ£γΌγ«γοΏ½?γγγͺθ¦η΄ γγοΏ½?οΏ½θ½γͺγ©οΏ½?ε₯οΏ½?θ¦η΄ γ§θͺ¬ζγγγ¦γγγγ¨γζοΏ½?οΏ½γγγγ¨γγ§γγΎγγ
ιεΈΈοΏ½? HTML γ§γ―γ欑�?γγγ«θ¨θΏ°γγΎγγ
<label>
Password:
<input
type="password"
aria-describedby="password-hint"
/>
</label>
<p id="password-hint">
The password should contain at least 18 characters
</p>γγ γγγοΏ½?γγγ« ID γγγΌγγ³γΌγγγγγ¨γ―γReact γ§γ―γγγγγ§γγΎγγγγ³γ³γγΌγγ³γγ―γγΌγΈδΈγ§θ€ζ°εγ¬γ³γγΌε―θ½γ§γγγID γ―δΈζγ§γγεΏ
θ¦γγγγΎγοΌ ID γγγΌγγ³γΌγγγοΏ½?γ§γ―γͺγγuseId γδ½Ώη¨γγ¦δΈζοΏ½? ID γηζγγΎγγ
import { useId } from 'react';
function PasswordField() {
const passwordHintId = useId();
return (
<>
<label>
Password:
<input
type="password"
aria-describedby={passwordHintId}
/>
</label>
<p id={passwordHintId}>
The password should contain at least 18 characters
</p>
</>
);
}γγγ§γη»ι’δΈγ« PasswordField γθ€ζ°ε葨瀺γγγε ΄εγ§γγηζγγγ ID γεγγ«γͺγγγ¨γ―γγγΎγγγ
import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); return ( <> <label> Password: <input type="password" aria-describedby={passwordHintId} /> </label> <p id={passwordHintId}> The password should contain at least 18 characters </p> </> ); } export default function App() { return ( <> <h2>Choose password</h2> <PasswordField /> <h2>Confirm password</h2> <PasswordField /> </> ); }
γοΏ½?γγγͺγθ¦γ¦ζ―ζ΄ζθ‘γ«γγγγ¦γΌγΆδ½ι¨οΏ½?ιγγη’Ίθͺγγ¦γΏγ¦γγ γγγ
γγγ«ζ·±γη₯γ
useId γ nextId++ οΏ½?γγγͺγ°γγΌγγ«ε€ζ°γε’εγγγγγγͺγθ―γοΏ½?γγηεγ«ζγγγγγγγγΎγγγ
useId οΏ½?δΈ»γͺε©ηΉγ―γReact γγγ΅γΌγγ¬γ³γγͺγ³γ°γ§η’ΊοΏ½?οΏ½γ«ζ©θ½γγγγ¨γδΏθ¨Όγγ¦γγγγ¨γ§γγγ΅γΌγγ§οΏ½?γ¬γ³γγΌδΈγ«γγ³γ³γγΌγγ³γγ― HTML ε½’εΌοΏ½?εΊεγηζγγΎγγγοΏ½?εΎγ―γ©γ€γ’γ³γδΈγ§γηζγγγ HTML γ«γγγ€γγ¬γΌγ·γ§γ³γ«γγ£γ¦γγ€γγ³γγγ³γγ©γγ’γΏγγγγγΎγγγγ€γγ¬γΌγ·γ§γ³γζ©θ½γγγ«γ―γγ―γ©γ€γ’γ³γοΏ½?εΊεγγ΅γΌγοΏ½? HTML γ¨δΈθ΄γγεΏ
θ¦γγγγΎγγ
γ―γ©γ€γ’γ³γγ³γ³γγΌγγ³γγγγ€γγ¬γΌγγγγι εΊγ―γγ΅γΌγ HTML γεΊεγγγι εΊγ¨δΈθ΄γγͺγε―θ½ζ§γγγγγγγγγγ€γ³γ―γͺγ‘γ³γγ«γ¦γ³γΏγ§δΏθ¨Όγγγγ¨γ―ιεΈΈγ«ε°ι£γ§γγuseId γεΌγ³εΊγγγ¨γ§γγγ€γγ¬γΌγ·γ§γ³γζ©θ½γγγ΅γΌγγ¨γ―γ©γ€γ’γ³γοΏ½?ιγ§εΊεγδΈθ΄γγγγ¨γδΏθ¨ΌγγγΎγγ
React ε
ι¨γ§γ―γεΌγ³εΊγε
γ³γ³γγΌγγ³γοΏ½? βθ¦ͺοΏ½?γγΉ (parent path)β γγ useId γηζγγγΎγγγοΏ½?γγγγ―γ©γ€γ’γ³γγ¨γ΅γΌγοΏ½?γγͺγΌγεγγ§γγγ°γγ¬γ³γγΌι εΊγ«ι’δΏγͺγ βθ¦ͺοΏ½?γγΉβ γδΈθ΄γγγγ¨γ«γͺγγΎγγ
θ€ζ°οΏ½?ι’ι£θ¦η΄ γ«ε―Ύγγ¦ ID γηζγγ
θ€ζ°οΏ½?ι’ι£θ¦η΄ γ« ID γδΈγγεΏ
θ¦γγγε ΄εγ―γuseId γ§ηζγγε€γε
±ζοΏ½?γγ¬γγ£γγ―γΉγ¨γγ¦δ½Ώη¨γ§γγΎγγ
import { useId } from 'react'; export default function Form() { const id = useId(); return ( <form> <label htmlFor={id + '-firstName'}>First Name:</label> <input id={id + '-firstName'} type="text" /> <hr /> <label htmlFor={id + '-lastName'}>Last Name:</label> <input id={id + '-lastName'} type="text" /> </form> ); }
γγγ«γγγδΈζοΏ½? ID γεΏ
θ¦γ¨γγγγΉγ¦οΏ½?θ¦η΄ γ«ε―Ύγγ¦ useId γεΌγ³εΊγεΏ
θ¦γγͺγγͺγγΎγγ
ηζγγγγγΉγ¦οΏ½? ID γ«ε ±ζγγ¬γγ£γγ―γΉγζοΏ½?οΏ½γγ
θ€ζ°οΏ½?η¬η«γγ React γ’γγͺγ±γΌγ·γ§γ³γ 1 γ€οΏ½?γγΌγΈγ«γ¬γ³γγΌγγε ΄εγ―γγͺγγ·γ§γ³γ¨γγ¦ identifierPrefix γ createRoot γΎγγ― hydrateRoot γ«ζΈ‘γγΎγγγγγ«γγγuseId γ§ηζγγγγγΉγ¦οΏ½?θε₯εγζοΏ½?οΏ½γγεε₯οΏ½?γγ¬γγ£γγ―γΉγ§ε§γΎγγγγ2 γ€οΏ½?η°γͺγγ’γγͺγ«γγ£γ¦ηζγγγ ID γθ‘ηͺγγγγ¨γγͺγγͺγγΎγγ
import { createRoot } from 'react-dom/client'; import App from './App.js'; import './styles.css'; const root1 = createRoot(document.getElementById('root1'), { identifierPrefix: 'my-first-app-' }); root1.render(<App />); const root2 = createRoot(document.getElementById('root2'), { identifierPrefix: 'my-second-app-' }); root2.render(<App />);