React란 무엇인가

React는 Front-end Library이다.

"컴포넌트"라는 개념에 집중이 되어 있는 라이브러리이다. 컴포넌트에 데이터를 넣으면 우리가 지정한 UI를 조립해서 보여준다. HTTP 클라이언트, Router, 상태 관리 등의 기능들을 내장하고 있지 않아 가볍고 공식 라이브러리가 있는 것도 아니어서, 해당 기능들은 개발자가 원하는 스택을 맘대로 골라서 사용할 수 있다.

Virtual DOM

리액트의 핵심은 Virtual DOM을 사용 하는 것이다.

기존 프레임워크들의 Model(of MVC)은, 대부분 양방향 바인딩을 통하여 Model에 있는 데이터가 변하면, View에서도 이를 변화시켜 준다.
변화(Mutation)는 복잡한 작업이다. 특정 이벤트가 발생하면, Model에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떠한 방식으로 View를 업데이트 해줄 지 로직을 정해야 한다.

페이스북에서 리액트를 만들기 전에 'Mutation을 하지 말고, 데이터가 바뀌면 기존 View를 날리고 새로운 View를 보여주자' 라고 생각했고, 그래서 Virtual DOM을 사용하게 되었다.

실제 DOM을 처리하는 건 성능이 느리고 비효율적이므로 관리하기가 힘들다.
Virtual DOM은 자바스크립트 객체에 불과하여 변화가 일어나면, 가상 DOM에 렌더링 하고, 기존 DOM과 비교하여 변화한 부분만 업데이트를 해주어 이미 렌더링 된 html을 실제 DOM API를 사용하여 처리하는 것보다 빠르다.

React의 장단점

장점)

• Virtual DOM을 사용하고 메모리 관리와 성능이 뛰어남
• 서버 & 클라이언트 렌더링을 둘 다 지원 (보통 자바스크립트로 하면 클라이언트 렌더링만 지원)
• 매우 간편한 UI 수정 및 재사용 → 컴포넌트화 하여 효율적
• 다른 프레임워크나 라이브러리와 혼용 가능

단점)

• VIEW ONLY (데이터 모델링, 라우팅, ajax 등의 기능이 없음)
• ie8 이하 지원하지 않음 (지원하려면 React ver.14 이하를 사용하고 polyfill 사용)

JSX

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

위 코드의 return안의 html 같은 코드는 JSX이다. JSX는 Javascript를 확장한 문법이고 React "엘리먼트(element)"를 생성한다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

JSX를 사용하려면 꼭 React를 import 해주어야 한다. 첫 번째 코드는 React와 그 내부의 Component를 불러오는 것이다.

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

위 코드와 같이 클래스 형태로 만들어진 컴포넌트에는 반드시 render 함수가 있어야 한다. 그리고 그 내부에서 JSX를 return 해주어야 한다.

태그는 꼭 닫혀있어야 하고, 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다. 단순히 감싸주는 역할을 할 때 Fragment 라는 것을 사용해도 된다.

// error 
class App extends Component {
  render() {
    return (
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
    );
  }
}

// 하나의 엘리먼트로 감싸주어야 함.
class App extends Component {
  render() {
    return (
    	<div className="App">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </div>
    );
  }
}

// div  대신 Fragment 사용
class App extends Component {
  render() {
    return (
    	<Fragment>
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </Fragment>
    );
  }
}

JSX에 표현식 포함하기

function player(name) {
  return user.firstName + " " + user.lastName; 
}

const user = {
  firstName : "HM",
  lastName : "Son"
};
  
const element = (
  <h1>Hello, {player(name)} !</h1>
);

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

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다. 예를 들어 1 + 1, user.firstName 또는 player(name) 등은 모두 유효한 Javascript 표현식이다.

조건부 렌더링

JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND 연산자를 사용한다.
if문은 사용할 수 없다. 사용하려면 IIFE (즉시 실행 함수 표현)을 사용 해야한다.

삼항연산자는 true 일 때와 false 일 때 다른 결과를 보여주고 싶을 때 사용한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
  }
}

export default App;

AND 연산자는 단순히 조건이 true 일 때만 보여주고 false 일 경우 아무 것도 보여주고 싶지 않을 때 사용한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }
}

export default App;

대부분 위의 방식으로 해결할 수 있지만, 복잡한 조건을 작성해야 할 때는 웬만하면 JSX 밖에서 로직을 작성하는 것이 좋다.

엘리먼트 렌더링

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

index.js 코드는 보통 위와 같다. 엘리먼트는 React 앱의 가장 작은 단위이다. 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다.

DOM에 엘리먼트 렌더링하기

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. React를 기존 앱에 통합하려는 경우, 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.

React 엘리먼트를 루트 DOM 노드에 렌더링 하려면 둘 다 ReactDOM.render()로 전달하면 된다.
첫 번째 파라미터는 렌더링 할 결과물이고, 두 번째 파라미터는 컴포넌트를 어떤 DOM(root DOM)에 그릴 지 정해준다.

---

공부 참고 : [링크텍스트](https://velopert.com/reactjs-tutorials), [링크텍스트](https://ko.reactjs.org/docs/introducing-jsx.html)