displayName?

리액트의 속성 중에 displayName 이란 게 있다.

디버깅의 편의성을 높이기 위해 사용하는 정적 문자열 속성이다.

일반적으로 리액트는 함수나 클래스의 name 속성을 자동으로 추론하여 이 이름으로 사용한다.

하지만 컴포넌트의 이름을 추론하기 어렵거나, 프로덕션 빌드에서 코드가 난독화되어 이름이 a, b 등으로 변경되면 디버깅 시 어떤 컴포넌트인지 파악하기 어렵다.

이럴 때 displayName을 명시적으로 설정하면, React DevTools가 컴포넌트의 name 속성 대신 displayName을 우선적으로 표시하여 디버깅을 쉽게 만든다.

언제 주로 사용할까?

displayName을 사용했을 때 좋은 경우는 아래와 같다.

1. 익명 함수로 컴포넌트 정의 시 export default () => <div>...</div>;와 같이 하면 리액트가 이름 추론 불가
2. React.memo로 래핑된 컴포넌트는 Memo로만 표기 됨
3. styled-components 같은 CSS-in-JS 라이브러리들은 내부적으로 displayName을 사용하여 DevTools에서 styled.div가 Styled(div)와 같이 의미 있는 이름으로 보이도록 함
4. 컴포넌트를 감싸는 함수인 고차 컴포넌트(HOC, Higher-Order Components)는 종종 익명 함수나 일반적인 이름(e.g. Wrapper)을 갖게 되어, DevTools에서 원래 컴포넌트가 무엇인지 알기 어렵게 만듦
5. React.forwardRef로 생성된 컴포넌트는 DevTools에서 ForwardRef로만 표시될 수 있음

Context에 displayName 적용

context에 displayName을 적용한 예시이다.

/**
 * 재사용 가능한 Context Hook 생성 팩토리
 * Context 검증 로직을 일반화하여 중복을 제거합니다.
 *
 * @param context - 사용할 Context 객체
 * @param contextName - 에러 메시지에 표시할 context 이름
 * @returns context 값이 null이 아닌 경우 context 값, 아니면 에러 throw
 *
 * @example * const AccommodationContext = createContext<AccommodationType[] | null>(null);
 * const useAccommodation = () => useContextHook(AccommodationContext, 'AccommodationContext');
 */
const useContextHook = <T>(context: Context<T | null>): T => {
  const contextValue = useContext(context);

  if (contextValue === null) {
    throw new Error(
      `${context.displayName}을 사용하려면 해당 Provider 내에서만 사용 가능합니다.`,
    );
  }

  return contextValue;
};

위 함수는 유효성 검사를 위해 따로 만든 커스텀 훅이다.

Context 객체에 displayName을 설정하면, 매개변수에 일일이 contextName 문자열을 수동로 전달할 필요가 없어지고, Context 객체 자체가 자신의 이름을 알도록 캡슐화가 가능하다.

import type { AccommodationType } from '@/types/accommodationType';
import { createContext } from 'react';

const AccommodationContext = createContext<AccommodationType[] | null>(null);
const AccommodationItemContext = createContext<AccommodationType | null>(null);

AccommodationContext.displayName = 'AccommodationContext';
AccommodationItemContext.displayName = 'AccommodationItemContext';

export const AccommodationProvider = AccommodationContext.Provider;
export const AccommodationItemProvider = AccommodationItemContext.Provider;

export default AccommodationContext;
export { AccommodationItemContext };

이를 위해서 미리 context를 만들고, displayName으로 속성을 정의해줄 필요가 있다.