이야기해보기 파일

[p. 119]

그럼에도 이러한 임의로 선언된 명칭으로는 개발 도구에서 컴포넌트를 특정하기는 어렵다. 이러한 문제를 해결하기 위해 컴포넌트를 기명 함수로 변경할 수 있다. 만약 함수를 기명 함수로 바꾸기 어렵다면 함수에 displayName 속성을 추가하는 방법도 있다. 고차 컴포넌트의 경우 이러한 기법을 유용하게 사용할 수 있다.

const MemoizedComponent = memo(function () {
	return <>MemoizedComponent</>
})
 
MemoizedComponent.displayName = '메모 컴포넌트입니다.'

컴포넌트를 기명 함수로 선언하면 개발 도구에서 확인하는 데에는 도움을 주지만, 함수 선언을 위한 코드 몇줄이 추가되기 때문에 귀찮아질 수 있다고 생각한다. 기명 함수로 바꾸기 어려울 경우 함수에 displayName 속성을 추가하는 방법도 있다고 하는데 이건 처음 알게 된 사실이라 자주 쓰이는지 궁금해요.