22.03.16(수) React 입문

React

페이스북 개발팀이 개발한 자바스크립트 라이브러리.
어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라,
그냥 기존 뷰를 날려버리고, 처음부터 새로 렌더링하는 방식의 라이브러리.
구조가 MVC,MVW인 프레임워크와는 달리, 오직 V(View)만 신경쓰는 라이브러리.

Virtual DOM

Virtual DOM = 실제 DOM의 가벼운 사본이라 볼수 있음. (DOM을 추상화한 자바스크립트 객체이다)

React에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 하는 과정

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.

Bundler - WebPack

import React from 'react';

위 코드는 react 모듈을 불러와서 사용할 수 있게 하는 코드이다.
사실 이렇게 모듈을 불러와서 사용하는것은 원래 브라우저에는 없던 기능이다.(Node.js에서 지원하던 기능)
모듈을 불러오는 기능을 브라우저에서도 사용하기 위해 Bundler를 사용한다.
대표적인 번들러로 WebPack이 있다.
번들러를 사용하면 불러온 모듈들을 모두 합쳐서 하나의 파일을 생성해준다. (최적화 과정에서 여러 개의 파일로 분리될 수도 있다.)

WebPack-Loader

• css-loader : css파일 불러오는 담당
• file-loader : 웹 폰트나 미디어파일들을 불러오는 담당
• babel-loader : 자바스크립트 파일들을 불러와 바벨을 사용하여 ES5 문법으로 변환해주는 담당(JSX도 이를 통해 ES5 문법으로 변환됨.)

JSX

리액트로 프로젝트를 개발할 때 쓰이는 비공식적인 자바스크립트 문법.
가독성이 높고 작성하기 쉽다.

React, JSX 문법

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
   이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때, 효율적으로 비교할 수 있도록, 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
   Fragment 사용해보자.
2. JSX 내부에서 자바스크립트 표현식을 사용할 수 있다.
   JSX 내부에서 자바스크립트 표현식을 사용하려면 {}로 감싸면 된다.

function App() {
  const name = "seyeon";
  return (
    <>
      <h2>Hello {name}</h2>
    </>
  )
}

3. JSX 내부에서 조건에 따라 다르게 보여주고 싶은경우? -> if문 대신 삼항 연산자.
   jsx 내부에서 if문의 사용은 불가능하다. 대신 삼항 연산자의 사용은 가능하다.

function App() {
  const name = "seyeon";
  return (
    <>
      {name === "seyeon" ? <h1>반갑슴!</h1> : <h1>누구?</h1>}
    </>
  )
}

4. 컴포넌트가 undefined만 반환하여 렌더링하지 않도록 하기.
   리액트 컴포넌트가 undefined만 반환될 경우 render로부터 아무것도 반환받지 못했다는 에러가 뜬다.
   (아직 왜 정확하게 이러면 안되는지 이해는 못함. 나중에 자세히 알아보자.)
   하지만, JSX 내부에서 undefined를 렌더링하는 것은 가능하다.