- html의 엔트리 포인트
- 사용자가 프로젝트를 요청하면 최초로 보여지는 html
- JavaScript의 엔트리 포인트
- html과 react 컴포넌트를 연결해주는 중간다리 역할을 함
import
: ‘어디서 가져온다’ 라는 의미from
뒤에는 경로가 표시되는데 react 처럼 경로가 아닌 것은 node_modules 폴더에서 가져온다는 뜻import React from 'react;
: node_modules 폴더 안에 있는 react 파일에서 React 라는 것을 가져온다는 뜻.
이 적혀있는데 자바스크립트에서 .
은 객체의 속성에 접근할 때 사용하는 표시이다. 이것으로 우리는 ReactDOM 이라는 것이 어떤 객체라는 것을 알 수 있다.render
라고 적혀있고 소괄호가 열리고 닫혔다. 자바스크립트에서 소괄호가 열리고 닫히는 것은 함수를 호출한다는 문법이다.ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM
이라는 객체에 있는 render()
라는 메소드에 접근해서 그 메소드를 호출<App />
이 태그의 형태로 들어가 있는데 리액트에서 이 문법은 컴포넌트를 의미함document.getElementById()
메소드를 통해 id 가 root 인 요소를 html 에서 가져옴ReactDom.render() 메소드
는 첫 번째 인자로 들어온 컴포넌트를 두 번째 인자로 들어온 DOM 요소 안에 렌더링 시켜주는 역할을 함 (렌더링은 ‘화면에 보여준다’ 라는 의미)<App />
이라는 컴포넌트를 index.html 의 id 가 root 인 요소 안에 렌더링 시켜주는 역할function App() {
return (
컴포넌트가 화면에 보여줄 코드(jsx)
);
}
export default App;
이 형태는 리액트 컴포넌트 중 함수형 컴포넌트의 형태를 가지고 있다. 리액트 컴포넌트의 이름은 대문자로 시작해야 한다. 컴포넌트의 형태는 태그의 형태와 매우 유사하다.
<div />
<App />
리액트는 요소의 첫 글자가 대문자로 시작하는지, 소문자로 시작하는지를 보고 이 요소가 리액트 컴포넌트인지 일반 태그인지를 구별한다. 또한 이 파일은 컴포넌트를 의미하는 파일이다
라는 것을 알기 위해서 파일명도 첫 글자를 대문자로 적는 컨벤션을 가지고 있다.