> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/react-2/undefined-1.md).

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

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

## 1. displayName

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

```javascript
import React from 'react';

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

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

export default Component
```

## 2. 함수 선언 사용하기&#x20;

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

```javascript
function App() {}
```