왜 리액트인가?

리액트 : MVC 에서 V 에 해당하는 역할에만 신경을 쓰는 라이브러리

리액트에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트라고 합니다.
컴포넌트는 매우 독립적이며 특정 관심사에 집중된 기능 블록입니다.

나중에 다시 설명드리겠지만 역할과 책임에 맞게 컴포넌트를 분리하다보면
PC (Presentational Component) : 직역하면 재사용이 가능한 컴포넌트라는 의미지만, 어떻게 보여지는가에 관련이 있는 컴포넌트입니다.
CC (Container Component) : CC 는 어떻게 동작하는지와 관련이 있습니다. 주로 통신이 이루어지는 컴포넌트를 의미합니다.
PC 와 CC 로 나누게 되는데 컴포넌트는 이처럼 독립적이며, 특정 관심사에 집중된 기능 블록입니다.

컴포넌트는 우리가 UI 를 다룰 떄 사용하는 템플릿과 다릅니다.

리액트는 렌더링의 효율성을 위해 DOM 트리를 비교해서 업데이트할 요소만 업데이트합니다.
이 것이 바로 Virtual DOM 입니다.

Virtual DOM

데이터 업데이트 -> 전체 UI 를 Virtual DOM 에 리렌더링 -> 이전 Virtual DOM 과 비교 -> 바뀐 부분 적용

React 는 상태 변경에 따라 뷰를 갱신하는데
Virtual DOM 은 렌더링의 효율성을 높이기 위해 가상의 DOM 을 사용하여 DOM 과 비교하면서 보다가
업데이트가 된 부분이 있다면 상태와 뷰를 보정합니다.

리액트의 단점

• 단점
  • 모든 기능을 갖춘 프레임 워크는 아닙니다. 개발시 필요한 부분은 다른 라이브러리를 써야하는 경우가 있습니다.
  • 옵저버블을 이용해서 비동기 데이터 스트림을 다루려면 RxJS 같은 도구를 사용해야합니다.

JSX

Angular js, Backbone, Ember 같은 프론트엔드 MVC 프레임워크에서는 js 와 템플릿이 분리되어 있는데 React 는 js 안에서 JSX 를 사용함으로써 조금 더 개발시에 직관력을 가질 수 있습니다.

JSX 가 javascript 도 아닌 것이 html 태그랑 같이 있어서 생소하거나 다소 기괴해보일수도 있는데 JSX 는 React 안에서 마크업을 하는데 있어서 상당한 도움을 줍니다. (오류 검사등…)

감싸인 요소 - React.Fragment 설명해드리기 (Fragment 에다가 id, class 넣는 것은 좋지 않다는 것도 전달하기)

인라인스타일링 - style 변수를 이용해서 하는 것 외에도 직접 입력시 <div style=> 이렇게 하는 거 알려드리기

JSX 에서는 언제나 코드를 닫아주어야 하는 거 명시

<Component> 에러 <Component /> 정상

Component

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <BestBlockchain name={"Blocko"} />
      </React.Fragment>
    );
  }
}

export default App;