React - CRA로 시작하기 + 기본 개념(VDOM, React Element 등) 정리

Noma·2021년 4월 6일

React

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>
  );
}