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

Before we start

 

2024.02.16 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useId( ) ?

[React .hook] What is useId( ) ?

 

전 게시글을 읽고 왔다면 대부분의 개발자라면 한번쯤은 의문을 품었을

 

왜 굳이 useId( ) hook을 사용해야 할까? 

 

Math.random()이나 uuid 같이 새롭게 id를 할당해 줄만한 메서드를 쓰는 방법은 안돼?

 

라는 궁금증을 품었을 것이다.

 

이러한 질문에 대답을 하려한다.

 

Why must we use 'useId( )'?

 

1. React dom이 새롭게 Rendering 되더라도 useId는 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;

 

여기 작성했던 코드중 

  const id = useId()

 

위의 코드를

  const id = Math.random()

 

이렇게 useId를 사용하지 않고 Math.random() 메서드를 사용하거나,

 const uuid = require('uuid');
 const id = uuid

 

위와 같은 방식으로 uuid를 할당해주는 방법은 안되냐는 질문이 주제였다.

 

결론을 말하자면 가능하다.

 

다만,

 

React 개발자라면 dom요소에 대해서 알고있을 것이다.

 

그렇다.

 

초기화 문제(?)가 발생한다.

 

사실 문제라 할것까진 없지만. useId() hook은 컴포넌트의 렌더링이 발생하더라도

 

이전에 생성한 id값을 고유한 그대로 유지하고 있지만,

 

Math.random(), uuid 와 같이 새롭게 할당하여 선언하는 방법으로는

 

id의 값이 렌더링 될 때 마다 새로운 값으로 할당이 된다.

 

이렇게 된다면, 초기 데이터가 유지 되는 useId가 훨씬 안정적이라 할 수 있다.

 

2. 서버사이드 렌더링에서 만들어진 id값과 클라이언트 사이드 렌더링에서 만들어진 id값이 같다.

 

*hydration 될 때 서버 사이드 렌더링에서 생성되는 HTML에서 각각 초기화되어 요소들에 할당된 id값 그대로

 

데이터를 클라이언트 사이드 렌더링을 할때 사용하여 초기화 한다.

 

위의 useId를 사용하여야만 하는 2가지 이유를 나열해 보았다.

 

글을 마치며...

 

useId( ) hook을 적극적으로 활용해야만 하는 이유들에 대해서 나열해 보았다.

 

개발엔 항상 정답은 없지만, 더 나은 방법 더 효율적인 방법을 통하여,

 

클린한 코드를 만들 수 있는 개발자가 되도록 노력하자.

 

여러분도 참고하여 적극적으로 활용하여,

 

보다 나은 개발에 도움이 되었으면 좋겠다.

 

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

 

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

 

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

---

 

 

"hydration"은 웹 개발에서 사용되는 용어로, 클라이언트 측 앱(보통 React 앱)이 서버로부터 받은 초기 데이터를 사용하여 초기 렌더링을 할 때, 이 데이터를 렌더링된 페이지에 주입하는 프로세스를 의미합니다. 이를 통해 서버로부터 받은 데이터를 사용자에게 빠르게 표시하여 초기 페이지 로딩 속도를 향상시킬 수 있습니다.

보다 구체적으로는, 서버 측 렌더링(SSR)에서 서버에서 생성된 HTML과 초기 상태(주로 데이터)를 클라이언트에게 전송하고, 클라이언트는 이 초기 데이터를 사용하여 앱을 초기화합니다. 이 과정을 "hydration"이라고 합니다. React에서는 주로 ReactDOM.hydrate() 함수를 사용하여 이 작업을 수행합니다.

따라서 "hydration"은 서버 측 렌더링된 HTML과 클라이언트 측 자바스크립트 앱의 초기 데이터와 상태를 결합하여 초기 렌더링을 완료하는 과정을 의미합니다.