리액트 컴포넌트 'displayName'의 용도는 무엇입니까?

리액트 컴포넌트 'displayName'의 용도는 무엇입니까?

리액션 컴포넌트의 이름을 붙이는 것이 좋은 프랙티스로 간주되는 것을 알고 있습니다.displayName사유지는 알 수 없지만요React 문서에는 다음과 같이 표시됩니다.

displayName 문자열은 메시지 디버깅에 사용됩니다.JSX는 이 값을 자동으로 설정합니다. 자세한 내용은 JSX를 참조하십시오.

이게 왜 그렇게 중요하죠?추가하지 않으면 어떻게 됩니까? (지금까지 추가하지 않고 디버깅에 문제가 없었습니다.)

컴포넌트 이름을 붙이는 방법에 대한 권장사항/우수사례가 있습니까?

나는 항상 준비해왔다.displayName같은 이름으로 지정합니다.이것은 실제 가동 빌드에서 데드코드 제거를 통해 삭제되므로 개발 빌드에서 사용되었을 수 있으며 애플리케이션 내에서 신뢰해서는 안 됩니다.

사용되는 위치에 대해서는 주로 리액트 오류 메시지 내에 있습니다.이것이 디버깅에 도움이 된다고 언급되는 이유입니다.이름을 얻을 수 없는 경우 기본적으로 다음과 같은 오류 메시지가 표시됩니다.Component프로젝트에 컴포넌트가 여러 개 있는 경우 디버깅이 매우 어렵습니다.

다음은 반응 소스의 displayName을 참조하는 몇 가지 오류 메시지입니다.

유효하지 않은 반품

인라인 스타일 오류

이 기사가 도움이 되었습니다.

React Native 구성 요소 클래스의 문자열 이름을 가져오려면 어떻게 해야 합니까?

    class CardGroup extends Component {
      render() {
        return (
          <div>{this.props.children}</div>
        )
      }
    }
    CardGroup.propTypes = {
      children: function (props, propName, componentName) {
        const prop = props[propName]

        let error = null
        React.Children.forEach(prop, function (child) {
          if (child.type !== Card) {
            error = new Error('`' + componentName + '` children should be of type `Card`.');
          }
        })
        return error
      }
    }

React 문서에서는 그 용도와 사용 시기에 대해 매우 명확하게 설명하고 있습니다.

displayName 문자열은 메시지 디버깅에 사용됩니다.일반적으로 컴포넌트를 정의하는 함수 또는 클래스의 이름에서 유추되므로 명시적으로 설정할 필요가 없습니다.디버깅을 위해 다른 이름을 표시하거나 상위 컴포넌트를 작성할 때 명시적으로 설정할 수 있습니다.

대부분의 경우 다음 설정을 할 필요가 없습니다.displayName함수/클래스 이름에서 유추할 수 있습니다.

이 구문을 사용하기 위해 컴포넌트를 다시 포맷했을 때 오류가 발생하지 않게 되었습니다.이 구문을 사용하면 React는 변수 정의에 따라 displayName을 추론할 수 있습니다.

const LandingPage = () => {
  return (
    <div>Landing Page</div>
  );
};

export default LandingPage;

언급URL : https://stackoverflow.com/questions/41581130/what-is-react-component-displayname-used-for