소스 코드 수정 방법

설치 다음 해야 할 일은 수정하는 방법을 알아내는 것

이렇게 만들어진 결과물을 어떠헤 배포할지 살펴볼 것 입니다.

 

리액트의 입구 파일인 index.js

 

index.js 파일의 코드를 보면

중간에 <App />이라는 태그가 있습니다.

 

<App /> 태그를 지우면

왼쪽 화면에서 오른쪽 화면 처럼 바뀐다

 

이 <App />의 실제 내용은 어디에 있는지 살펴보겠습니다

import App from './App';

코드의 App은 바로 위에 있는 위의 코드의 App을 의미합니다

4번째 줄에서 App 이라고 써서 9번째 줄에서도 <App />으로 쓰는 것입니다.

그리고 이 App은 from 뒤에 있는 './App'에서 왔습니다

'./App'은 확장자명인 .js가 생략된 것입니다.

점(.)은 현재 디렉토리를 의미합니다

즉, index.js가 위치한 디렉토리와 같은 디렉터리에 있는 App.js로부터 <App /> 태그가 왔다는 뜻입니다.

 

 

---

 

 

 

 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      Hello React
    </div>
  );
}

export default App;

App.js 파일에서 <div className="App"> </div> 안의 내용을 다음과 같이 Hello React로 변경하면

브라우저 화면에서도 Hello React 가 출력된다

 

 

그리고 가운데 정렬된 것을 통해

App.css가 꾸며주고 있다는 것을 알 수 있다

 

---

 

 

개발자 도구의 코드를 보면

<div class = "App">Hello React!</div> 라는 코드는 App.js에서 온 걸 알 수 있는데

그 위에 id가 root인 요소 <div id = "root">는 무엇일까요?

 

입구 파일인 index.js 파일을 보면 다음과 같이 <App /> 이라는 

태그를 ID값이 root인 태그로 렌더링하라는 코드가 잇습니다.

ID 값이 root인 태그는 public 폴더를 보면 index.html이라는 파일이 있는데, 

여기에 ID가 root인 태그가 있습니다