uuid를 map의 key값으로 사용하고 생긴 문제점

{assistantList?.data.map((assistant: ResGetAssistantListDataType) => (
	<li className={`type-item ${currentAssistant === assistant ? 'active' : ''}`}
		key={uuid()}
        onClick={() => {
			console.log('click chatbot ::: ', assistant);
			setCurrentAssistant(assistant);
		}}
     >
		<span className="type-cont">{assistant.name}</span>
	</li>
))}

 

이렇게 하니까 이유 모를 클릭 이벤트가 먹지 않았다. 뭐가 잘못되었는지 살펴보다 uuid를 assistant.id로 변경하니까 문제가 해결되었다,

 

uuid() 는 컴포넌트가 리렌더링될 때마다 새로운 값이 생성되므로, 리액트가 각 리스트 아이템을 동일한 아이템으로 인식하지 못할 수 있다는 것. 이로 인해 불필요한 리렌더링이 발생하고, 상태가 제대로 유지되지 않을 수 있다.

 

리액트에서 키(key)는 컴포넌트의 재사용을 최적화하기 위해 사용된다. 컴포넌트가 갖는 키 값이 변경되면, 리액트는 이전 컴포넌트와 동일한 컴포넌트가 아니라고 판단하고, 해당 컴포넌트를 새로운 컴포넌트로 인식하여 처음부터 다시 마운트(process)한다...

이 과정에서 다음과 같은 문제가 발생할 가능성이 생김

1. 상태 손실: 새로운 키로 인해 컴포넌트가 새로 마운트될 때, 해당 컴포넌트의 모든 내부 상태는 초기화된다. 이는 onClick 이벤트 핸들러 등에서 상태를 참조할 때 문제를 일으킬 수 있다.
2. 성능 저하: 컴포넌트가 불필요하게 재생성되면, 그 과정에서 추가적인 연산이 필요하고, 이는 애플리케이션의 전반적인 성능에 부정적인 영향을 미칠 수 있다.
3. 이벤트 핸들링 문제: 컴포넌트가 새로 마운트될 때, 기존에 연결되어 있던 이벤트 리스너들이 제거되고 새로운 이벤트 리스너가 연결된다. 이는 사용자가 클릭 이벤트를 발생시키려 할 때, 예상치 못한 동작이나 클릭 이벤트가 전혀 발생하지 않는 결과를 초래할 수 있다. 

그렇다면 uuid 는 언제 사용하는 것이 좋을까?

 

 uuid()를 키(key)로 사용하는 것이 일반적인 시나리오에서는 유용할 수 있다고 한다.

특히 데이터에 자연스러운 고유 식별자가 없을 때 uuid()를 사용하여 고유한 키를 제공하는 것이 매우 효과적입니다. 이 방법은 동적으로 생성되는 요소들, 예를 들어 사용자 입력에 따라 시간에 따라 변화하는 데이터 목록에 아이템을 추가할 때 유용

하지만, uuid()의 주된 사용 사례는 리스트 아이템이 지속적으로 변하지 않고, 추가만 되는 경우에 한정된다. 데이터가 변경될 때마다 uuid()를 사용하여 키를 생성하면, 앞서 설명한 대로 리액트가 각 아이템을 매번 새로운 컴포넌트로 인식하여 리렌더링할 때 문제가 발생할 수 있다ㅠㅠ

• 데이터 항목에 자연스럽게 고유한 식별자가 없는 경우: 예를 들어, 사용자가 입력한 텍스트에서 파생된 항목들이 이에 해당할 수 있습니다.
• 아이템의 추가만 발생하고, 순서나 아이템 자체에 변동이 없는 경우: 이때 uuid()를 사용하면 각 컴포넌트의 키가 고유하게 유지되어, 리액트의 리렌더링 프로세스가 최적화됩니다.