리액트 앱 살펴보고 수정하기
리액트 앱 프로젝트 폴더 살펴보기
VSCode에서 movie_app_2025 폴더에는 node_modules, public, src 폴더가 보입니다.
public 폴더 살펴보기
public 폴더에는 favicon.ico 파일이 있습니다. 이 것은 브라우저 제목과 함께 표시되는 아이콘입니다.
index.html 파일 살펴보기
index.html 파일에는 기본 내용만 작성되어 있습니다.
src 폴더 살펴보기
src 폴더에는 setupTests.js, serviceWorker.js, logo.svg, index.js, index.css, App.test.js, App.js, App.css 등 많은 파일이 들어 있습니다.
src 폴더 정리하기
아래 그림을 참고하여 사용하지 않을 파일을 삭제합니다.
index.js 파일 수정하기
src 폴더의 index.js 파일을 열고 아래와 같이 코드를 수정합니다.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);App.js 파일 수정하기
src 폴더의 App.js 파일을 수정합니다.
function App() {
return <div className="App" />;
}
export default App;
리액트 앱 다시 실행하기
리액트 앱을 다시 실행합니다.
| npm start |
App.js 파일을 열어 화면에 표시될 코드를 모두 삭재하여 화면에 아무것도 표시되지 않았습니다.
App.js 파일 수정하기
function App() {
return <div>안녕!!!</div>;
}
export default App;
create-react-app으로 만든 리액트 앱은 이렇게 코드가 수정되면 그 내용을 바로 화면에 반영을 줍니다.
크롬 개발자 도구로 리앤트 앱 살펴보기
크롬 브라우저 창에서 마우스 커서를 놓고 오른쪽 버튼을 누른 다음 [검사]를 눌러서 크롬 브라우저 개발자 도구를 실행한 다음 [Elements] 탭을 누릅니다.
그럼 앞에서 App.js 파일에 입력한 코드<div>Hello!!!</div>를 볼 수 있습니다.
Hello!!!가 화면에 어떻게 표시되는지 살펴보기
<!DOCTYPE html>
(생략...)
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
'프로그래밍 언어 > REACT' 카테고리의 다른 글
| 컴포넌트 (0) | 2025.01.24 |
|---|---|
| 리액트 동작 원리 알아보기 (1) | 2025.01.23 |
| 깃허브에 리액트 앱 업로드하기 (0) | 2025.01.21 |
| 빠른 create-react-app (0) | 2025.01.21 |
| React 실행 환경 준비 (0) | 2025.01.21 |
