리액트 설치후 실행에러 해결하기

생활코딩! React 프로그래밍 책을 참고하여 시작하였다

리액트 설치하기

리액트 폴더 하나 만들어서 VS코드에서 열고 터미널에서 설치 준비를 한다

npx create-react-app .

여기서 이 .은 현재폴더를 의미한다

리액트를 설치 완료했다

리액트로 실행 해보기

index는 리액트의 입구파일이다 npm start 명령어를 이용해서 리액트를 동작시킬때 이 index를 찾아서 여기에 있는대로 동작하게 되는 것이다

설치후 바로 보이는 index 안의 코드

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

터미널에서 npm start로 시작해보자

그런데 책과는 달리 이렇게 하얀화면만 나오는 상태가 보여졌다

책에 있는 실행후 화면

흰 화면 에러 해결기

1. 코드 점검

점검한 코드 목록

• index.js
• app.js
• index.html
• index.css
• app.css

index.js 와 app.js를 테스트 용으로 코드 변경

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

// root div 찾기
const rootElement = document.getElementById('root');

// 리액트 루트 생성
const root = ReactDOM.createRoot(rootElement);

// 가장 단순하게 h1 하나만 렌더링
root.render(
  React.createElement('h1', null, '리액트 테스트 성공')
);

변경후 터미널에서 npm start 시 Compiled successfully 뜨면서 문제 없이 실행됨 그렇지만 화면은 계속 흰화면임

2. 브라우저 다른거써보기

크롬, 크롬 시크릿 모드,엣지 모두 같은 흰 화면이었다

3.네트워크 확인하기

네트워크 확인했을때 리액트는 정상적으로 실행되고 있었다

4. 콘솔에서 확인하기

콘솔에서 직접 확인했을 때 화면 자체는 정상으로 표시 되고 있었다 문제는 리액트가 root안에 아무것도 렌더링 하지 못하고 있다는 뜻이다 

리액트 설치 꼬임이나 Node_modules 문제일것으로 예상했다 따라서 package.json에서 리액트 버전을 확인해주었다

"react": "^19.2.4", "react-dom": "^19.2.4",

현재설치 버전은 19버전이다 여기서 책에서 알려주는 create-react-app(CRA) +리액트 19버전이 호환이 안된다는 사실을 알았다

리액트는 CRA가 2025년에 공식적으로 새 앱용으로 권장하지 않는다고 했고 19버젼과 호환성 이슈가 있다고 했다

따라서 나는 책에서 알려주는 내용을 따라가기 쉽게 맞추기 위해서 버젼을 18로  낮춰보는 결정을 했다

5.리액트 삭제후 재설치

# 기존 설치 파일 삭제
Remove-Item -Recurse -Force node_modules
Remove-Item -Force package-lock.json

# React 18 버전으로 다시 설치
npm install react@18.2.0 react-dom@18.2.0

# 나머지 패키지 설치
npm install

# 개발 서버 다시 실행
npm start

재설치후 터미널에서 npm start를 했을때 바뀐건 리액트 버전뿐... 흰화면은 돌아 오지 않았다...

그래서 아예 새로운 폴더를 만들어서 테스트 해보았으나 그것도 마찬가지였다

 6.책에 나오는 CRA 방식 말고 Vite 버전을 새로 만들어서 테스트 해보기

설치할때 프레임워크는 react로 설정하고 variant는 자바스크립트로 설정해주면 된다

설치후 Local에 있는 주소를 눌러서 화면을 열면 흰화면 대신 이렇게 리액트 홈 화면이 나온다

여기 써있는 HMR 을 보니까 콘솔창에서 봤던 이 에러가 생각 났다

아 이거만 검색해봤어도 호환성 이슈 있는거 알고 시간단축했을텐데 아쉽다 ㅋㅋㅋㅋㅋ

정리

흰화면 이슈는 CRA가 종료됬기 때문에 발생한 이슈로 현재 내가 확인한 모든것들에는 문제가 없었다

리액트는 Vite로 사용하자!