드디어 내가 React를 배우고 있다니 신난다 ! 우와아 🔥
그래서 시작을 하긴 했는데.. 처음에는 복잡한 파일구조를 보고 조금 당황스러웠다.
이 많은 파일들은 다 뭘까? 제대로 알지 못한 상태로
리액트를 배우기 시작하니 대 혼동이었다..!
그래서 이 포스팅에서는,
리액트의 중요한 파일 3가지 에 대해 정리해보려고 한다 👍
- index.js
- App.js
- index.html
index.js
src폴더에 포함되어있는 index.js는 메인 파일이라고 볼 수 있다.
이 파일에서 HTML템플릿과 JavaScript의 컴포넌트를 조합하여 렌더링한다.
1️⃣ import문
기본 세팅으로 import문이 여러개 작성되어있다.
이 것은 외부의 모듈을 해당 파일로 로드하는 작업이다!
기본적으로는 'react', 'reactDom'이라는 모듈을 로드하고 있는데
이것들이 React의 본체이다.
이외 다른 '/APP' 등의 컴포넌트들과 스타일시트 또한 import로 로드한다.
2️⃣ ReactDom.render
ReactDOM.render(<App />, document.getElementById("root"));위의 코드를 살펴보면 ReactDom은 .render라는 메소드를 실행하고 있음을 알 수 있다.
ReactDom이 App컴포넌트를 id값이 root인 태그 안에 렌더링해준다는 것이다.
(여기서 id 값이 root인 태그는 index.html에 있다.)
이 메소드가 index.js 파일에서 실행하는 유일한 처리이다.
App.js
src 폴더에 포함되어있는 App.js는 컴포넌트를 정의하는 프로그램이다.
실제로 화면에 표시되는 내용들은 모두 이 파일에서 정의된다.
1️⃣ import문
import문으로 여러 모듈을 가져올 수 있다.
2️⃣ .APP 클래스
기본 셋팅임에도 div요소에 App 클래스가 정의되어있다.
자바스크립트에서도 클래스를 만들 수 있으며, ES6에서는 아래와 같이 클래스가 정의되어있다.
class App extends Component {...}
Component 클래스를 상속하여 App 클래스를 생성되었음을 알 수 있고
결국 이 것이 컴포넌트의 기반이 되는 클래스임을 확인하게 되었다 !
또한 .App의 return값 안에는 HTML태그들이 작성되어있는데, JSX문법으로 쓰여진다.
index.html
public 폴더에 포함되어있는 index.html은 web페이지의 템플릿이다.
1️⃣ id = 'root' 태그
<div id="root"></div>index.html에 있는 id='root'는 위에서 살펴보았듯이,
index.js의 ReactDom.render에서 인수로 지정하고있으며
이 태그 부분에 컴포넌트를 포함하도록 되어있다.
index.html 템플릿의 기능은 이 뿐이다!
