애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ESLint react/display-name 해결하기
    Tip 2021. 9. 2. 12:11
    728x90
    반응형

    해당 에러는 의외로 많은 곳에서 볼 수 있고 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의 정의는 조금 더 보기 편한 코드를 위한 것이라고 생각한다.

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

     

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

    반응형

    댓글

Designed by Tistory.