인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
react에 반영이 되지 않습니다.
작성
·
53
0
App.js, child.js 모두 강의 내용과 같이 작성 후 터미널에서 실행시켜 보았는데 리액트 초기화면만 표시되고 있습니다. 캐시 삭제, vscode 재시작 등을 시켜보았으나 변함이 없습니다.
왼쪽 화면이 App.js 코드 내용대로 바뀌지 않는 이유가 무엇일까요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 졸프인프런님.
리액트 프로젝트에서 코드가 업데이트되지 않고 초기 화면만 보이는 문제에 대해 몇 가지 체크 포인트를 제공해 드리겠습니다.
App.js 확인: App.js 파일 안에 변경된 내용이 있는지 확인해주세요. App.js는 보통 리액트 프로젝트의 진입점이며, 이 파일이 제대로 수정되었는지 먼저 점검해 보세요. 주석 처리되거나 변경 사항이 저장되지 않았을 수 있습니다.
import 확인: child.js가 App.js에서 제대로 import 되어 있는지 확인하세요. 만약 제대로 연결되어 있지 않다면, child.js의 변화가 반영되지 않을 수 있습니다.
import ChildComponent from './child';
- React 컴포넌트 렌더링 확인: App.js에서 ChildComponent가 정상적으로 렌더링되도록 추가했는지 확인하세요. ChildComponent를 렌더링하는 코드를 App.js에 추가하여야 합니다.
function App() {
return (
<div>
<ChildComponent />
</div>
);
}
개발 서버 재시작: 가끔씩 크롬 브라우저의 캐시 문제나, 리액트 개발 서버가 변경된 파일을 인식하지 못하는 경우가 있습니다. 이러한 경우
npm start를 통해 개발 서버를 다시 시작해 보세요. 또한, 크롬의 캐시를 삭제한 후 문제를 확인해 보는 것도 합니다.콘솔 에러 메시지 확인: 브라우저 개발자 도구의 콘솔을 열고 에러 메시지가 있는지 확인해 보세요. 에러 메시지가 힌트를 줄 수 있습니다.
관련된 질문과 답변을 통해 유사한 문제가 해결된 사례를 확인하실 수 있습니다:
- 갑자기 왜 화면이 안뜨는지 모르겠어요ㅠ: 개발자 도구의 콘솔에서 에러를 확인해보는 것을 권장하고 있습니다.
- 연습을 해보기 위해서 app.js를 복붙한 다음부터 터미널 창이 이상합니다.: 가끔 리액트의 개발 서버가 제대로 반영되지 않을 때, 프로젝트를 새로고침하거나, 컴퓨터 재부팅을 시도해 볼 수도 있습니다.
질문자님의 문제 해결에 도움이 되길 바랍니다. 위의 방법으로도 해결되지 않는다면, 코드 블록을 사용해 코드를 올려주시면 더 구체적인 도움을 드릴 수 있을 것 같습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.