[React .hook] What is useId( ) ?

Before we start

 

React hook은 여러가지가 있다.

 

2024.02.15 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React] React's State Management

[React] React's State Management

 

대표적인 React hook들을 정리해 놓은 게시글이니 참고하자.

 

So what is userId ? 

 

각설하고 오늘 처음 알게된 useId() 라는 훅이 있어서 설명하려 한다.

 

React hook 중에서는 사용하기에 가장 쉬운 hook으로 알려져있으니

 

여러분도 사용해보길 적극 추천한다.

 

React hook - userId( )

 

import {userId} from 'react';

function App() {
  const id = useId()
  console.log(id);

  return (
    <div>
      <label>이름</label>
      <input />
    </div>
  );
}

export default App;

 

위의 console을 출력하면

 

:r0:  과 같은 값을 출력한다.

 

출력값이 왜 이렇게 나왔는지 알아보기전에 useId()를 왜 쓰는지를 알아보자

 

위의 코드에서

 

label과 input은 서로 연관성이 없는 각자 독립된 UI 요소들이다.

 

이렇게 각자 독립된 요소들이 연관되어질 수 있게 도와주는 hook이 바로 useId()다.

 

import {userId} from 'react';

function App() {
  const id = useId()
  console.log(id);

  return (
    <div>
      <MyInput />
      <MyInput />
    </div>
  );
}

function MyInput() {
  return(
    <div>
      <label htmlFor="name">이름</label>
      <input id="name" />
    </div>	
  );
}

export default App;

 

MyInput 컴포넌트를 생성해서 위의 App 컴포넌트에 두개를 넣어주면

 

 

위 사진과 같은 결과를 얻을 수 있다.

 

하지만 !!

 

 

이와같이 식별자가 "name"으로 동일하기 때문에 올바르게 작동하지 않는다.

 

그렇다면 위와같은 id값 즉, 식별자가 동일하기 때문에 해결할 수 있는 방법은?

 

그렇다. 

 

앞서 설명한 useId()를 적극 사용해보자.

 

import {userId} from 'react';

function App() {
  return (
    <div>
      <MyInput />
      <MyInput />
    </div>
  );
}

function MyInput() {
  const id = useId()
  return(
    <div>
      <label htmlFor={id}>이름</label>
      <input id={id} />
    </div>	
  );
}

export default App;

 

이와같이 App 컴포넌트에 있던 useId hook을 MyInput 컴포넌트로 옮겨줬다.

 

그리고 선언한 id 즉, useId를 할당한 상수를

 

식별자 id 값에 할당해준다.

 

이렇게 할당해주면 각 요소들은 고유한 id값들을 가지게 된다.

 

How to correctly use userId

 

물론 위와같이 개발하는 개발자도 있을 것이다.

 

하지만 여러개의 컴포넌트를 관리하고 사용하기에 용이하며, 유지 보수하기에는 적합한 코드가 아니다.

 

그렇다면, 어떤 방법을 지향해야 하는지를 이제 알려주겠다.

 

우선 틀린 예시를 알려주겠다.

 

import {userId} from 'react';

function App() {
  return (
    <div>
      <MyInput />
    </div>
  );
}

function MyInput() {
  const id = useId()
  return(
    <div>
      <label htmlFor={id}>이름</label>
      <input id={id} />
    </div>
    <div>
      <label htmlFor={id}>나이</label>
      <input id={id} />
    </div>	
  );
}

export default App;

 

 

MyInput 컴포넌트는 App 컴포넌트에서 한번만 호출하면 될 수 있도록 수정하고

 

    <div>
      <label htmlFor={id}>이름</label>
      <input id={id} />
    </div>
    <div>
      <label htmlFor={id}>나이</label>
      <input id={id} />
    </div>

 

위와 같이 id들을 동일하게 넣으면

 

처음 했던 실수와 같은 실수를 하게되는 것이다.

 

 

그렇다면 어떤 방법이 있을까?

 

그렇다. 백틱을 활용하여 구분지어줄 수 있다.

 

import {userId} from 'react';

function App() {
  return (
    <div>
      <MyInput />
    </div>
  );
}

function MyInput() {
  const id = useId()
  return(
    <div>
      <label htmlFor={`${id}-name`}>이름</label>
      <input id={`${id}-name`} />
    </div>
    <div>
      <label htmlFor={`${id}-age`}>나이</label>
      <input id={`${id}-age`} />
    </div>	
  );
}

export default App;

 

 

그러면 이와 같이 id값들이 다르게 들어간다.

 

그런데 JavaScript를 조금이라도 써본 개발자들은 의문을 품게된다.

 

'왜? 꼭? useId()훅을 써야하는데?'

 

'Math.random()이나 uuid와 같은 메서드 쓰면 안돼?'

 

자, 위의 궁금증을 품고있는 개발자라면 아래의 글을 읽었으면 좋겠다.

 

2024.02.16 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] Why must we use 'useId( )'?

[React .hook] Why must we use 'useId( )'?

 

 

이 글을 마치며...

 

해당 글은 아래의  별코딩 유튜버님의 영상을 참고하여 제작하였습니다.

 

* 해당 저작물 관련하여 개인적으로 posting permission 받았습니다.

 

https://www.youtube.com/watch?v=y0vhpilNSKo