🤔 React.js란..?

• Facebook 소프트웨어 엔지니어 Jordan Walke에 의해 탄생
• 프레임워크가 아닌 라이브러리로 따로 정해진 골격이 없으므로 원하는 구조로 설계
  - 필요한 기능에 따라 라이브러리를 골라 사용
• 강력한 커뮤니티 형성으로 인해 문서화가 잘되있다.
• 선언형(Declarative) 프로그래밍
  - Re-render the whole app on every update
  - 전달 속성 props, 상태 state 변경 감지 -> UI 없데이트(Rendering)
• 컴포넌트(Component)기반 프로그래밍
  - 캡슐화 된 컴포넌트 로직(Logic)은 템플릿(Template)이 아닌, JSX(Javascript XML)
• React(web), React Native(mobile app), React Electron(desktop app) 1석 3조

React concep

1. React는 UI 제작을 위한 JavaScript 라이브러리
2. React의 특징은 선언형 컴포넌트, 양방향 데이터 바인딩 없음, XML 구문 포함
3. React 컴포넌트 작성을 손쉽게 하는 XML 구문이 바로 JSX
4. JSX는 Syntactic sugar로 컴포넌트에 속성 전달 가능
5. React 업데이트의 핵심은 "재조정(Reconciliation)" 비교 알고리즘

1. Components

• 한 가지의 기능을 수행하는 UI 단위
• 서로 독립적이고 재사용이 가능한 것
• React 애플리케이션은 Root 컴포넌트 하나로 이루어져 있다.
• 각각의 독립적인 컴포넌트를 서로 조립해서 만들어 놓은것이 react application
• 컴포넌트는 다른 컴포넌트와 독립적으로 그 컴포넌트에 해당하는 로직과 상태가 들어있다.
• 데이터를 가지고 있는 state, 사용자에게 어떻게 보여지는지 정의하는 render()가 있다.
  - state가 변할 때마다 render()가 계속 호출된다.
• 컴포넌트는 재사용이 가능하고 독립적인 단위로 나누는것이 중요 포인트

component 구조

import React from 'react';

class LikeBtn extends Component {
  state = { // 데이터를 나타내는 오브젝트
    numberOfLikes: 0,
  };
// state라는 오브젝트에 데이터가 변경이되면 이 render함수가 자동적으로 다시 호출됨
  render() { 
 
    return <button>
            {this.state.numberOfLikes}
    </button>;
  }     
}

2. Virtual DOM

• react의 모든 구조들이 DOM tree에 업데이트 되는것이 아닌 component의 render 함수가 호출이 되면 이전의 Virtaul DOM tree와 비교해서 바뀐 부분만 계산을 하여 실제 DOM tree에 업데이트 된다.
• render 함수가 많이 호출되어도 실질적으로 보여지는 데이터가 변동 되지 않으면 DOM tree에는 영향을 주지 않는다.
• React 내부에서 Virtual DOM를 메모리에 보관해 놓고 있기 때문에 성능을 걱정하지 않아도 되고 리액트가 빠른 이유이다.
• 매번 업데이트 하는것이 아닌 업데이트 해야되는 내용들을 모았다가 한번에 다같이 업데이트 한다. (react는 60fps를 보장)