[eslint] no-use-before-define 에러 해결 (React,TypeScript)

 

 

eslint 적용후 커밋을 날리던 도중  ~ was used before it was defined  no-use-before-define 라는 오류가 발생하며

커밋이 되지않았다.

  2:19  error  'IProduct' was used before it was defined  no-use-before-define

 

변수를 선언하기 전 해당 변수의 사용을 막기위한 에러이다.

 

문제가 됐었던 코드

function ProductList() {
  return (
    <Container>
        <ProductWrap>
            <ProductName><ProductName/>
        <ProductWrap/>
    </Container>
  );
}

// 밑쪽에 styled-component를 작성했기때문에 eslint오류가났음

const ProductWrap = styled.div`
`;
const ProductName = styled.div`
`;

const Container = styled.div`
`;

styled-copmonent를 사용하면서 styled-component를 렌더링되는 함수밑쪽에 (코드상에서 ProductList() ) 작성하였는데, 이것이 eslint문법에 걸렸다.

styled-component를 렌더링 되는 함수 위쪽에 작성하기엔 가독성이 좋지않아서 eslint 설정을 변경해주기로하였다.

 

.eslintrc.js 파일 수정

module.export = {
    rules: {
        //밑에 두 줄을 추가해주면된다.     
        //타입스크립트를 사용할때
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error", { "variables": false , "functions": false,"classes": false}],
    }
}

rules을 추가해주면 오류는 나지않지만 해당 rule을 검사하지않는다는 의미이므로 코딩에 주의하기를 바란다.