React App 빈 화면만 보이는 문제 해결(Invalid hook call error)

React + ts + styled-components 함께 사용하기

typescript를 이용하는 새로운 React 프로젝트 만들기 : npx create-react-app 내 앱 이름 --template typescript

styled-components 설치 : npm install --save styled-components

ts에 styled-components 타입 알려주기 : npm i --save-dev @types/styled-components

 

+ react와 ts 같이 쓰기 참고

https://create-react-app.dev/docs/adding-typescript/

Adding TypeScript | Create React App

---

 

✅ 내가 겪은 에러 : Invalid hook call

처음 create-react-app 하면 잘 보이던 화면이 바꾸기만 하면 화면에 흰색 바탕으로 아무것도 보이지 않았다. public 파일에 있는 index.html의 색을 바꾸어주어도 변경사항이 전혀 나타나지 않는 문제. console을 확인해보면 오류 폭탄이다.

 

 

✅ 내 코드

기존 react 프로젝트는 문제 없이 돌아가고 새로 만든 프로젝트에서만 빈화면이 보이기 때문에 일단 styled-components와 ts를 위한 @types도 빠짐없이 설치 되었는지 확인했다. 하지만 계속 빈화면만 떴다.

import styled from "styled-components";

const Wrapper = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Box = styled.div`
  width: 200px;
  height: 200px;
  background-color: blue;
  border-radius: 15px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

function App() {
  return (
    <>
      <Wrapper>
        <Box>Hi</Box>
      </Wrapper>
    </>
  );
}

export default App;

- App.tsx 파일

 

✅ 문제 해결

이 링크를 참고하여

# 👇️ with NPM npm install react@latest react-dom@latest

# 👇️ ONLY If you use TypeScriptnpm install --save-dev @types/react@latest @types/react-dom@latest

# ----------------------------------------------# 👇️ with YARNyarn add react@latest react-dom@latest

# 👇️ ONLY If you use TypeScriptyarn add @types/react@latest @types/react-dom@latest --dev

버전 체크, 업데이트

rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cachenpm cache clean --force or npx clear-npx-cache

npm install

 

캐시 삭제 후 node_modules 재설치 ⇒ 이후 문제가 해결되고 화면이 제대로 보인다.

 

 

+ 참고로 화면이 제대로 보이고 난 이후 import react만 빨간 줄이 계속 보임.

 

‘node_modules에서 @types - react - index.d.ts에서 모듈이 아니다’ 이런 식의 오류가 뜨는데 그대로 경로를 찾아 들어가 파일을 클릭하면 바로 빨간줄이 없어진다. 몇 번 이런 적이 있는데 못찾는 경로를 내가 찾아 누르면 없어지는 건 반영이 느린거같다..?

 

해결 후 다시 코딩 시작! 계속 개발을 하다보면 같은 오류를 접할 때도 많기 때문에 문제 해결 방법을 알고 정리 해놓는 것이 나와 다른 사람들의 시간을 결국 Save 할 수 있다 👏🏼