객체 비교에서 한 실수

<ul className="type-list">
	{assistantList.data.map((assistant: ResGetAssistantListDataType) => (
		<li
			className={`type-item ${currentAssistant === assistant ? 'active' : ''}`}
			key={assistant.id}
			onClick={() => {
				setCurrentAssistant(assistant);
				postThread();
		}}>
			<span className="type-cont">{assistant.name}</span>
		</li>
	))}
</ul>

 

currentAssistant와 assistant가 동일할 때 다른 컬러로 변경하는 효과를 주고 싶었다. 분명 같은 값을 가진 객체인데 색이 변하지 않는 문제가 발생했다. 

그렇게 취준할 때 익히 배웠던 참조타입, 원시타입의 차이점이다..

이렇게 실제 현업에서 실수해보니 다시금 중요성을 느끼는 1인.. 

 

객체는 값이 아닌 주소 값을 바라보기 때문에 두 객체가 같은 값을 가지고 있어도 다른 주소 값을 참조하고 있기 때문에 다른 값이라고 인식하는 것!!

 

따라서 객체 자체가 아닌 객체 고유 id를 비교하는 것으로 해결할 수 있다. 

<ul className="type-list">
	{assistantList.data.map((assistant: ResGetAssistantListDataType) => (
		<li
			className={`type-item ${currentAssistant.id === assistant.id ? 'active' : ''}`}
			key={assistant.id}
			onClick={() => {
				setCurrentAssistant(assistant);
				postThread();
		}}>
			<span className="type-cont">{assistant.name}</span>
		</li>
	))}
</ul>