[React] 01.리액트 시작하기

벨로퍼트와 함께하는 모던 리액트

• 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/
• 진도
  - 1.1. 리액트는 어쩌다가 만들어졌을까?
  - 1.2. 작업환경 준비
  - 1.3. 나의 첫 번째 리액트 컴포넌트
  - 1.4. JSX

 

💬 리액트는 어쩌다가 만들어졌을까?

• 프로젝트의 규모가 커질수록 DOM을 직접 건드리면서 작업을 진행하기 어려움이 있다
  - 코드가 난잡해지고, 이로 인해 유지보수가 어려워진다
• 위와 같은 이유로 Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌다
• 이러한 프레임워크는 특정 값이 변경될 때, 특정 DOM의 속성이 바뀌도록 연결을 해주어서 업데이트 과정을 간소화한다
• 반면 리액트는 상태에 따른 업데이트가 아니라 처음부터 모든 걸 새로 만들어 준다는 발상에서부터 시작했다
• 처음부터 새롭게 만들기 때문에, 업데이트에 대한 이슈가 발생하지 않는다
• 다만 정말 모든 UI를 새롭게 만들게 되면 속도가 굉장히 느려지므로, Virtual DOM이라는 개념을 도입한다

 

💬 Virtual Dom

• 메모리상에 가상으로 존재하는 DOM으로, 실제로 브라우저에서 DOM을 보여주는 것보다 빠른 속도를 자랑한다
• 리액트는 상태가 업데이트 되면, 업데이트가 필요한 UI를 Virtual Dom을 통해 렌더링 한다
• 그리고 알고리즘에 실제 브라우저의 DOM과 비교한 후, Virtual Dom을 패치한다
• 이러한 방법으로 리액트는 빠른 성능을 자랑한다

 

💬 작업환경 준비

• Node.js yarn Code Editor Git bash를 설치한다
  - yarn: 설치할 때 터미널에서 brew install yarn 명령어를 사용한다
• 터미널을 열어 $ npx create-react-app begin-react 명령어를 실행하여 새로운 리액트 프로젝트를 만든다
• begin-react라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성된다
• cd명령어를 사용해 해당 디렉터리에 들어가 yarn start를 입력한다
• 리액트의 기본 포트는 3000이므로, 브라우저가 자동 실행되지 않는다면 직접 localhost:3000으로 접속해 확인한다
• 프로젝트의 run상태를 종료할 때는 Ctrl+C를 누른다

 

💬  첫 번째 리액트 컴포넌트

// Hello.js
import React from 'react'; // 리액트 컴포넌트를 불러오기위해 import

function Hello(){
  return <h1>Hello World</h1>
}

export default Hello; // HEllo 컴포넌트를 export

• VSCode에서 src 디렉터리에 Hello.js 파일을 생성하고 작성한다
• 리액트 컴포넌트는 함수 형태, 클래스 형태로 작성할 수 있다. 지금은 함수 형태로 작성하는 방법을 알아보자
• 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX라고 부른다

 

// App.js
import React from 'react';
import Hello from './Hello';

function App(){
  return(
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

• 앞서 export 했던 Hello 컴포넌트를 import해오면 XML의 형태(<Hello />)로 사용할 수 있다

 

// index.js
import React from 'react'; // ReactComponent 사용을 위한 import
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 브라우저에 있는 실제 Dom의 내부에 리액트 컴포넌트를 렌더링한다
ReactDOM.render(, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: <https://bit.ly/CRA-PWA>
serviceWorker.unregister();

• ReactDOM.render(): 브라우저에 있는 실제 Dom의 내부에 리액트 컴포넌트를 렌더링 한다
• document.getElementById('root')로 선택한 DOM은 public/index.html 에서 확인할 수 있다
• 결국, 리액트 컴포넌트를 렌더링 한 결과는 #root의 내부에 렌더링 된다