React란?

React는 사용자 인터페이스를 구축하기 위한 페이스북에서 만든 자바스크립트 라이브러리입니다.
여기서, Vue나 Angular는 프레임워크라고 하는데 왜 React는 라이브러리일까요?
Vue나 Angular는 MVC, MVW와 같이 View를 위한 로직을 구현하는 곳과 data를 처리하기 위한 곳을 구분하여 프로그래밍하는 디자인 패턴이 있습니다. 하지만 React는 오직 View만을 신경 쓰기 때문에 라이브러리라고 합니다.

React의 특징

• JSX
• Component 기반
• Virtual DOM(가상돔)

1. JSX(JavaScript XML)

React에서는 JSX라고 하는 자바스크립트의 확장 문법을 사용할 수 있습니다.
아래의 코드처럼 자바스크립트 내에서 HTML 태그를 사용할 수 있습니다.

const header = <header>헤더입니다.</header>

하지만 .js파일에 위 코드가 있으면 브라우저에서는 에러가 발생합니다. 그렇기 때문에 JSX 문법을 브라우저가 이해할 수 있도록 babel이라는 도구를 사용하여 브라우저가 이해할 수 있는 언어로 컴파일하는 과정이 필요합니다.

JSX의 규칙

• 반듯이 하나의 엘리먼트로 감싸야 합니다.

//bad
const wrong = (
  <div></div>
  <div></div>
)

// good
const right = (
 <div>
    <div></div>
    <div></div>
 </div>  
)

const right = (
 <> //만약 두 개의 컴포넌트를 사용해야 한다면 Fragments로 감싸 주면 된다.
   <div></div>
   <div></div>
 </>
)

• 자바스크립트 코드를 작성 할 땐 {}(중괄호) 안에 작성을 해야 합니다.

const name = '리액트'
const jsCode = (
  <div>Hello {name}</div> // => Hello 리액트
)

• JSX 내부에서는 if 문을 사용할 수 없기 때문에 삼항연산자를 사용해야 합니다.

const name = '리액트'
const good = (
  <div>{name === '리액트' ? '리액트' : '리액트가 아닙니다.'}</div>

• 인라인 스타일링

const inline = (
  <div style={{backgroundColor:'black'}}></div> // 카멜 표기법으로 작성해야한다. 
)

• 엘리먼트의 클래스 이름을 작성할 때 class가 아닌 className을 사용해야 합니다.

const className = <div className="name"></div>

2. Component 기반

컴포넌트는 재사용이 가능한 하나의 의미를 가진 독립적인 단위 모듈입니다.
웹 페이지 하나를 만드는 데 수많은 요소들이 들어갑니다. 만약 페이지마다 똑같은 요소를 사용해야 한다고 했을 때 HTML, CSS, JavaScript를 똑같이 작성을 해야 합니다. 그렇게 되면 굉장히 비효율적이게 됩니다. 하지만 React의 컴포넌트는 이러한 중복 요소를 없애줄 수 있습니다. 하나의 모듈로써 사용이 되기 때문에 import를 통해 얼마든지 가져다가 똑같은 요소를 보여줄 수 있습니다.

Component 구현

리액트에서 컴포넌트를 선언하는 방식은 두 가지입니다. 하나는 함수형 컴포넌트이고, 하나는 클래스형 컴포넌트입니다.

• 클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component{
  render() {
    const name = 'react';
    return <div>{name}</div>
  }
}

export default App;

클래스형 컴포넌트에서는 render 함수가 꼭 있어야 합니다. 그리고 render 함수에서는 JSX를 반환해 주어야 합니다.

• 함수형 컴포넌트

import React from 'react';

function App() {
  const name = 'react';
  return <div>{name}</div>
}

컴포넌트를 선언하는 두 방식의 차이점은 클래스형 컴포넌트의 경우 state 관리와 라이프사이클의 기능을 사용할 수 있고 임의의 메서드를 정의할 수 있습니다. 반면 함수형 컴포넌트에서는 state 관리나 라이프사이클 API를 사용할 수 없습니다. 하지만 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 state 관리와 라이프사이클 API를 사용할 수 있게 되었습니다.

3. Virtual DOM(가상돔)

Virtual DOM은 말 그대로 실제 DOM과 똑같은 가상의 돔을 만드는 것입니다.
리액트에서는 데이터가 변하게 되면 Real DOM이 업데이트되는 것이 아닌 Virtual DOM이 업데이트되고 이전 DOM과 비교하여 바뀐 부분만 Real DOM에 적용하는 방식입니다.

Real DOM을 업데이트하는 세가지 과정
1. 데이터를 업데이트하면 현제 UI를 Virtual DOM에 리렌더링합니다.
2. 이전 Virtual DOM과 현재 내용을 비교합니다.
3. 변경된 부분만 Real DOM에 적용합니다.