index.html

• html의 엔트리 포인트
• 사용자가 프로젝트를 요청하면 최초로 보여지는 html

index.js

• JavaScript의 엔트리 포인트
• html과 react 컴포넌트를 연결해주는 중간다리 역할을 함

1. import 구문

• import : ‘어디서 가져온다’ 라는 의미
• from 뒤에는 경로가 표시되는데 react 처럼 경로가 아닌 것은 node_modules 폴더에서 가져온다는 뜻
• import React from 'react; : node_modules 폴더 안에 있는 react 파일에서 React 라는 것을 가져온다는 뜻
• 자바스크립트 파일끼리 import 와 export 할 때는 파일 확장자를 적어주지 않아도 되기 때문에 ./App.js 대신 ./App 으로 간단하게 적어도 된다.

2. ReactDOM.render 메소드

• ReactDOM 뒤에 . 이 적혀있는데 자바스크립트에서 . 은 객체의 속성에 접근할 때 사용하는 표시이다. 이것으로 우리는 ReactDOM 이라는 것이 어떤 객체라는 것을 알 수 있다.
• 그 뒤에는 render 라고 적혀있고 소괄호가 열리고 닫혔다. 자바스크립트에서 소괄호가 열리고 닫히는 것은 함수를 호출한다는 문법이다.
• ReactDOM.render(<App />, document.getElementById('root'));
  • ReactDOM 이라는 객체에 있는 render() 라는 메소드에 접근해서 그 메소드를 호출
  • render() 안의 첫 번째 인자로 <App /> 이 태그의 형태로 들어가 있는데 리액트에서 이 문법은 컴포넌트를 의미함
  • 두 번째 인자로 document.getElementById() 메소드를 통해 id 가 root 인 요소를 html 에서 가져옴
  • ReactDom.render() 메소드는 첫 번째 인자로 들어온 컴포넌트를 두 번째 인자로 들어온 DOM 요소 안에 렌더링 시켜주는 역할을 함 (렌더링은 ‘화면에 보여준다’ 라는 의미)
  결론적으로 ReactDom.render() 는 <App /> 이라는 컴포넌트를 index.html 의 id 가 root 인 요소 안에 렌더링 시켜주는 역할

App.js

• 실제 화면에 보여지고 있는 컴포넌트

function App() {
  return (
	 컴포넌트가 화면에 보여줄 코드(jsx)
  );
}

export default App;

이 형태는 리액트 컴포넌트 중 함수형 컴포넌트의 형태를 가지고 있다. 리액트 컴포넌트의 이름은 대문자로 시작해야 한다. 컴포넌트의 형태는 태그의 형태와 매우 유사하다.

<div />
<App />

리액트는 요소의 첫 글자가 대문자로 시작하는지, 소문자로 시작하는지를 보고 이 요소가 리액트 컴포넌트인지 일반 태그인지를 구별한다. 또한 이 파일은 컴포넌트를 의미하는 파일이다 라는 것을 알기 위해서 파일명도 첫 글자를 대문자로 적는 컨벤션을 가지고 있다.

기타 폴더 구성

1. public 폴더

• index.html
• images 폴더 : 이미지 파일 관리
• data 폴더 : mock data 관리

2. src 폴더

• components : 공동 컴포넌트 관리
• pages : 페이지 단위의 컴포넌트 폴더로 구성
  • Login 폴더 : Login.js, Login.css
  • Main 폴더 : Main.js, Main.css
• styles 폴더
  • reset.css : css 초기화
  • common.css : 공통으로 사용하는 css 속성 정의 (ex. box-sizing, font-family)

components vs pages

• 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리 (ex. Header, Nav, Footer)
• 페이지 컴포넌트의 경우 pages 폴더에서 관리
• 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리