-
ESLint react/display-name 해결하기Tip 2021. 9. 2. 12:11728x90
해당 에러는 의외로 많은 곳에서 볼 수 있고 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의 정의는 조금 더 보기 편한 코드를 위한 것이라고 생각한다.
하지만 위와 같은 경우가 된다면 오히려 더욱 보기 불편해 보이는 코드가 된다.
그래서 나의 경우 기본적으로는 켠 채로 사용하다 위와 같은 코드가 발생할 경우에만 해당 줄에 설정을 꺼서 사용하고 있다.
'Tip' 카테고리의 다른 글
Javascript concat vs spread vs push 성능에 대해 (1) 2021.09.09 readonly 객체 수정하기 (0) 2021.09.06 eslint, prettier 수정, 검색 후 commit하기 (0) 2021.08.27 내가 Front-End를 끝내고 체크하는 리스트 (0) 2021.08.26 ESLint dependency cycle detected import/no-cycle Error 해결하기 (0) 2021.08.18