[React] 18 Version useId hook

18버전의 새로운 hook 이 추가 됐다.

공식문서에 따르면, 수화 불일치를 피하면서 서버와 클라이언트에서 안정적인 고유 ID를 생성하기 위한 후크입니다.

토큰 을 포함하는 문자열을 생성하고, 이렇게 하면 토큰이 고유한지 확인하는 데 도움이 되지만

CSS 선택기와 같은 API에서는 지원되지 않습니다.

useId 언제 사용 할까?

• 입력이 있는 레이블과 같이 두 개의 HTML 요소를 함께 연결하는 데 사용합니다.
• 매번 고유 ID를 생성해야 하는 곳에 사용하세요.
• 동일한 생성 ID를 여러 번 사용하려면 접두사 또는 접미사를 사용하세요.

사용하면 안될 때

• useId CSS 선택기 에 후크를 사용하지 마십시오.
• 목록의 키에 사용하지 마십시오.
• 변경해서는 안 되는 값에는 사용하지 마십시오.

사용법은 간단하다 기존 훅 처럼 상단에 import

import React, { useId } from 'react';

    const id = useId();
    const id2 = useId();

    useEffect(() => {
        const myComponentDOMElement1 = document.querySelector(`[id="email-${id}"]`); // this will work
        const myComponentDOMElement2 = document.querySelector(`[id="password-${id}"]`); // this will work
        console.log(myComponentDOMElement1);
        console.log(myComponentDOMElement2);
        const myComponentDOMElement3 = document.querySelector(`[id="email-${id2}"]`); // this will work
        const myComponentDOMElement4 = document.querySelector(`[id="password-${id2}"]`); // this will work
        console.log(myComponentDOMElement3);
        console.log(myComponentDOMElement4);
    }, []);
    
        return (
        <>
            <React.Fragment>
                <label htmlFor={`email-${id}`}>Email</label>
                <input type="text" id={`email-${id}`} name="email" />

                <label htmlFor={`password-${id}`}>Password</label>
                <input type="password" id={`password-${id}`} name="password" />
            </React.Fragment>
            <React.Fragment>
                <label htmlFor={`email-${id2}`}>Email</label>
                <input type="text" id={`email-${id2}`} name="email" />

                <label htmlFor={`password-${id2}`}>Password</label>
                <input type="password" id={`password-${id2}`} name="password" />
            </React.Fragment>
        </>
    )

공식 문서 : https://reactjs.org/docs/hooks-reference.html#useid