React

• React는 Facebook이 만든 사용자 UI 구축을 위한 라이브러리

• View 중심

• 모바일 앱으로 발행이 쉬움

• 앱처럼 뛰어난 UX

• 일반 웹사이트보다 비즈니스적 강점 존재

0. 특징

0.1 JSX 문법

• React는 선언형(Declartive) 프로그래밍

• JSX는 JavaScript 안에서 HTML 문법을사용해서 view를 구성을 도와줌

• JSX를 얻기 위한 알고리즘에 대한 구현을 하지 않음(document.createElement 등)

• 이와같이 선언형의 특성은 화면 설계에 초점을 맞춰 개발할 수 있도록하여 다른 부분에 고민을 최소화하여 높은 생산성 보장

class HelloMessage extends React.Component {
    render() {
        return (
        	<div>
            	Hello {this.props.name}
            </div>
        );
    }
}

• JSX의 사용으로, React의 사용성은 증가하였고, 대표적인 특징이 됨

0.2 Component 기반

• React는 Component 기반의 라이브러리
• 여러 부분을 Component화해서 코드의 재사용성과 유지보수성 증가

1. 상태값과 속성값으로 관리하는 UI 데이터

• UI 라이브러리인 리액트는 UI 데이터를 관리하는 방법 제공
  • UI 데이터는 컴포넌트 내부에서 상태값과속성값으로 구성
    • 상태값(State)
      • 해당 컴포넌트가 관리하는 데이터
      • 불변 변수는 아니지만 불변 변수로 관리하는게 좋음
    • 속성값(Prop)
      • 부모 컴포넌트로부터 전달받는 데이터
      • 불변 변수이기 때문에 값을 변경하려고 하면 에러 발생
    • UI 데이터를 상태값과 속성값으로 관리하지 않으면 UI 데이터가 변경되도 화면이 갱신되지 않을 수 있음
  • redux와 같이 전역 데이터를 관리해 주는 라이브러리를 리액트에 적용할 때도, 컴포넌트의 상태값과 속성괎을 이용해 구현
• UI 데이터가 변경되면 화면을 다시 그려야 하는데, 리액트와 같은 라이브러리를 사용하지 않는다면 DOM을 직정 수정해야 함
  • DOM을 직접 수정하다 보면 비즈니스 로직과 UI를 수정하는 코드가 뒤섞여 코드가 복잡해짐
  • UI 데이터가 변경되면 리액트가 화면을 자동으로 갱신해 주는데 이것이 리액트의 가장 중요한 역할

2. 리액트 요소와 가상 돔

• 리액트 요소(element)는 리액트가 UI를 표현하는 수단
• 리액트는 렌더링 성능을 위해 가상 돔을 활용
  • 브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업
  • 따라서 빠른 렌더링을 위해서는 돔 변경을 최소화해야 함
  • 리액트는 메모리에 가상 돔을 올려 두고, 이전과 이후의 가상 돔을 비교하여 변경된 부분만 실제 돔에 반영
    • 리액트는 렌더링 이전, 렌더링 이후에 보이게 될 2개의 가상 돔 객체를 가짐
    • 비교(Diffing): 이 2개의 돔을 비교하는 과정
      • Diffing을 통해 바뀌는 부분을 Batch Update로 실제 돔에 한번에 반영
    • 재조정(Reconciliation): 실제 브라우저에 반영하는 과정
• 하나의 화면을 표현하기 위해 여러 개의 리액트 요소가 트리(tree) 구조로 구성
  • 하나의 리액트 요소 트리는 시간에 따라 변화하는 화면의 한순간을 나타냄
• 리액트에서 데이터 변경에 의한 화면 업데이트는 렌더 단계(render phase), 커밋 단계(commit phase)를 거침
  • Render phase: 실제 돔에 반영할 변경 사항을 파악하는 단계
  • Commit phase: 파악된 변경 사항을 실제 돔에 반영하는 단계