1. 프로젝트 생성
-
새롭게 생성:
yarn create react-app <새 프로젝트 이름> -
기존 파일을 복사해서 생성
cp -R <복사할 파일> <새 프로젝트 이름>
위와 같이 프로젝트 폴더 생성 후 cd <새 프로젝트>로 들어간 후 yarn start를 해준다.
1.1 파일 구조
src폴더 안에 다음과 같이 폴더를 생성하자. 이는 필요에 따라 편한대로 첨삭하여 구성하면 된다.
- components : 각각 컴포넌트들을 폴더 형식으로 담는다.
예) components-> header-> header.jsx, header.module.css
- services : 서버와 통신하는 등 서비스 로직들은 컴포넌트 안에 섞어 작성하기 보다는 따로 분리해 js파일로 저장하자.
예) services-> database.js, youtube.js, ...
- pages : react-router를 사용하는 경우 페이지별로 나눠서 담는다.
예) pages -> home, login, settings...
2. VDOM (가상 DOM)
실제 DOM에 접근하는 대신, 이를 자바스크립트 객체 로 구성해 추상화하여 사용하는 방식이다. 리액트가 모든 처리를 대신 해주기 때문에 DOM API 조작을 직접 신경 쓸 필요가 없다.
3. React Element
가상 DOM은 리액트 엘리먼트로 이루어져 있고, 브라우저 DOM은 DOM 엘리먼트로 이루어져 있다. 이때 리액트 엘리먼트는 그에 대응하는 실제 DOM 엘리먼트가 어떻게 생겨야 하는지 기술해준다.
3.1 React.createElement 사용
const element=React.createElement(
'h1',
{className:'greeting'},
'Hello, world!'
);- 1번째 인자: 만들려는 엘리먼트의 타입 정의
- 2번째 인자: 엘리먼트의 프로퍼티
- 3번째 인자: 엘리먼트의 자식 노드
이는 DOM 엘리먼트 <h1>Hello, world!</h1> 와 같다. 리액트 엘리먼트는 단지 리액트가 DOM 엘리먼트를 구성하는 방법을 알려주는 자바스크립트 리터럴 이라고 생각하면 된다.
3.2 JSX 사용
JSX는 JavaScript를 확장한 문법으로, Babel이 JSX를 React.createElement()를 호출해 컴파일한다.
위의 예시와 아래는 동일하다.
const element=(
<h1 className="greeting">
Hello, world!
</h1>
);(JSX에 대한 자세한 것은 다음 포스팅에서 다룬다.)
4. React DOM
- Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다.
- 이 안에는 리엑트 엘리먼트를 브라우저에 렌더링하는 데 필요한 모든 도구가 들어있다.
render메소드와 서버에서 사용하기 위한renderToString과renderToStaticMarkup메소드가 있다.
4.1 ReactDOM.render
- 1번째 인자: 렌더링할 리액트 엘리먼트
- 2번째 인자: 렌더링이 일어날 대상 DOM 노드
위와 같이 HTML에서 정의해둔 root라는 id를 가진 div의 자식으로 1번째 인자로 쓰인 엘리먼트가 추가된다.
<div id="root">
<React.StrictMode>
<App />
</React.StrictMode>
</div>5. Strict Mode
애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. 이 모드는 개발 모드에서만 활성화되기 때문에, 배포된 버전에서는 비활성화되어 사용자는 콘솔에서 에러메시지를 볼 수 없다.
애플리케이션 내 어디서든지 아래와 같이 strict 모드를 활성화할 수 있습니다.
import React from 'react';
function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode>
<div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
<Footer />
</div>
);
}Header와 Footer 컴포넌트는 Strict 모드 검사가 이루어지지 않고, ComponentOne과 Two는 각각의 그 자손까지 검사가 이루어진다.
Reference
