ESLint react/display-name 해결하기

해당 에러는 의외로 많은 곳에서 볼 수 있고 Google에서 코드를 참고하다 보면 자주 겪게 되는 에러입니다.

익명 함수를 사용해서 발생하는 에러로 주로 아래와 같은 경우 많이 발생한다.

{
 ...
 component: ({size, color}) => <AnyComponent size={size} color={color} />,
 ...
}

위와 같은 코드는 꽤나 자주 사용되는데 해당 코드를

const renderComponent = ({size, color}) => <AnyComponent size={size} color={color} />
{
 ...
 component: renderComponent,
 ...
}

아래와 같이 함수를 외부로 빼서 작성하게 되면 해결할 수 있다.

물론 TS를 적용하면 문제가 발생하는 경우가 있다.

 

위와 같은 경우에는

interface IProps {
 size: string;
 color: string;
}

const renderComponent = ({size, color}:IProps):React.ReactComponent => 
	<AnyComponent size={size} color={color} />
{
 ...
 component: renderComponent,
 ...
}

이 정도로 충분히 허용 괜찮은데 라고 생각할지 모르지만

styled-components의 서버사이드를 위해 사용하는 코드를 보면 조금 생각이 달라질지도 모른다.

// eslint react/display-name를 끄지 않기 위한 코드
const enhanceApp = (App: AppType) => {
  const styleCollect = (
  props: React.PropsWithChildren<AppPropsType<NextRouter, Record<string, unknown>>>,
  ) => sheet.collectStyles(<App {...props} />);
  return styleCollect;
};
    
ctx.renderPage = () =>
  originalRenderPage({
  	enhanceApp,
});

// 해당 줄만 끈 코드
ctx.renderPage = () =>
  originalRenderPage({
  	// eslint-disable-next-line react/display-name
  	enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
});

위와 아래 어느게 좋아 보이는가?

개인적으로도 자주 사용하는 HOF 역시 익명 함수이기에 적용이 짧게 줄일 수 없고 풀어서 써줘야 한다.

타입의 길이 역시 무척이나 길다.

해당 ESLint의 정의는 조금 더 보기 편한 코드를 위한 것이라고 생각한다.

하지만 위와 같은 경우가 된다면 오히려 더욱 보기 불편해 보이는 코드가 된다.

 

그래서 나의 경우 기본적으로는 켠 채로 사용하다 위와 같은 코드가 발생할 경우에만 해당 줄에 설정을 꺼서 사용하고 있다.