디버깅을 위한 컴포넌트 이름 설정

컴포넌트의 이름을 설정하지 않으면 개발 도구에 표시되는 컴포넌트는 Anonymous가 된다. 명확하지 않은 컴포넌트 이름은 디버깅을 어렵게 하므로 이름을 설정해줄 필요가 있다.

1. displayName

displayName 속성을 사용해 개발 도구에 표시 될 이름을 설정할 수 있다.

import React from 'react';

const Component = React.forwardRef((props, ref) => 
  <div ref={ref}/>
)

Component.displayName = '디버깅 도구에 표시할 컴포넌트 이름' 

export default Component

2. 함수 선언 사용하기

화살표 함수를 사용하지 않고 함수 선언을 사용하면 이름있는 함수가 되어 개발자 도구에 이름이 표시된다.

function App() {}