[React] React 익히기: CRA, SPA, JSX

1- CRA로 실행된 리액트의 기본 구조

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

• public/index.html → 페이지 템플릿
• src/index.js → 자바스크립트 시작점

public/

여기안에 쓰인 파일들은 오직 public/index.html 만 쓰일 수 있다.

 

src/

여기안에 JS 파일과 CSS 파일을 넣으면 된다. Webpack은 여기에 있는 파일만 본다. 그래서 이 폴더 이외에 넣는것은 webpack에 의해 처리되지 않는다. (대부분 리액트 소스 코드들은 이곳에 작성한다.)

 

package.json

해당 프로젝트에 대한 정보들이 들어있다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있다. package.json에 명시된 라이브러리를 한번에 다운받으려면 npm install

 

npm run start 리액트 앱 시작

package.json scripts에 “start”: 라고 명시되어있기 때문에, 이 부분을 원하는 명령어로 바꿔서 사용가능하다.

---

2- SPA (Single Page Application)

App.js 파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용된다.

1. public/index.html

div element의 id를 root로 설정되어있다.

2. src/index.js

자바스크립트의 시작점이다. 여기서 위에 root id를 가진 div element를 잡아준 후 이 element안에서 화면을 꾸밀 수 있게 한다.

 

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

SPA에서 페이지 전환(브라우징, React-Router-DOM)은 HTML5의 History API를 사용한다.

• History.back()- 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드, 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 낸다.
• History.forward()- 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드, 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다.
• History.go()- 특정한 세션 기록을 이동하기 해주는 비동기 메서드, 1을 넣어 호출하면 바로 앞 페이지로 이동, -1을 넣어 호출하면 바로 뒤 페이지로 이동한다.
• History.pushState()- 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 Javascript 객체를 저장하는 것이 가능하다.
• History.replaceState()- 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.

---

3- JSX (Javascript Syntax Extension)

JSX는 자바스크립트의 확장 문법이다. 리액트에서는 이 JSX를 이용하여 화면에서 UI가 보이는 모습을 나타내준다.

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

 

JSX를 사용하면 UI를 나타낼 때 자바스크립와 HTML 구조를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다. 따라서 리액트에서 JSX를 사용하는 것은 의무는 아니지만 너무나도 편리하기 때문에 대다수가 사용한다.

 

원래 리액트에서 화면을 그리는 방식

1. React.createElement API를 사용하여 element 생성

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

2. element를 메모리에 저장한 뒤 ReactDOM.render 함수를 사용하여 실제 웹 브라우저에 그려줌

ReactDOM.render(myelement, document.getElementById('root'));

 

그러나 모든 UI를 만들때마다 createElement를 사용하여 컴포넌트를 만들 수는 없기 때문에 JSX를 사용한 후 바벨이 다시 createElement로 바꿔 사용한다.

JSX는 컴포넌트에 여러 element 요소가 있다면 반드시 부모 요소 하나로 감싸줘야한다.

function hello() {
	return <div>
		<div>..</div>
		<div>.....</div>
		</div>;
}