리액트 시작하기

폴더 생성하고 vscode 터미널에서 아래의 명령어 실행

npx create-react-app ./

 

리액트 기본 구조 살펴보기

이름이 수정되면 안되는 파일

1. public / index.html => 페이지 템플릿

2. src/ index.js => 자바스크립트 시작점

 

src 폴더

대부분의 리액트 소스 코드들은 이 곳에 작성하면 된다. 

 

package.json 파일

해당 프로젝트에 대한 정보들이 들어있다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어있다. 

 

react 앱 실행해보기

npm run start

app.js 의 노란 네모 부분을 수정하면 위와 같이 글씨가 변경 되는 것을 확인할 수 있다. 

 

실행 과정

public/index.html

index.html 파일을 확인해보면 div 태그의 id 가 root 라는 부분이 있다. 

src/index.js

index.js 에서 root 라는 id 를 가진 부분을 root 라는 변수에 저장하고, render 함수를 통해 해당 id 를 가진 태그 부분에 화면을 만든다. 위에서 APP 컴포넌트를 호출하기 때문에 app.js 에 작성한 내용이 화면에 나오게 된다.

---

SPA ( Single Page Application) 이란? 

웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을 말한다. 

 

SPA 에서 화면 변경은 어떻게?

자바스크립트 영역에서 History API 를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다.  

 

JSX 알아보기

• Javascript syntax extension
• 자바스크립트의 확장 문법
• JSX 를 이용하면 UI 를 나타낼 때 자바스크립트와 HTML 구조를 같이 사용할 수 있기 때문에 기본 UI 에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다.

const simple = <h1> Hello world! </h1>;

 

리액트에서 JSX 는 의무인가요?

의무는 아니지만 자바스크립트 안에서 UI 작업을 하는게 너무 편리하기 때문에 리액트를 사용할 때 거의 모든 사람이 JSX를 사용한다.