What is React.js?

• 페이스북에서 개발하고 관리하는 UI 라이브러리

React 특징

1. 단방향 데이터 흐름을 갖는다. (flux 참고)
   -> 데이터 추적 및 디버깅을 쉽게 해준다
2. 가상돔을 사용해 DOM 변경시 필요한, 최소한만을 갱신하게 한다(성능 개선)
3. UI 컴포넌트 기반
   -> 재사용성 및 유지 보수에 용이하다.
4. 함수형 프로그래밍을 적극적으로 활용한다.

Babel?

• 자바스크립트 코드를 변환해주는 컴파일러. 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있다.
• 리액트에서는 바벨은 JSX를 React.createElement() 호출로 컴파일한다.

Webpack

• 자바스크립트 애플리케이션을 위한 정적 모듈 번들러.

JSX?

• JSX(JavaScript XML)는 React.createElement를 생성해주는, 자바스크립트로 HTML 코드 작성을 도와주는 문법이다.

Virtual DOM?

• DOM(Document Object Model): HTML 문서를 프로그래밍적으로 접근 가능하게 해주는 인터페이스이다. HTML은 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 개체들의 트리구조로 변환된다(DOM Parser).
• virtual DOM: real DOM을 추상화한 DOM이다. 빠른 렌더링을 위해 리액트는 메모리에 가상 돔을 올려 놓고 이전과 이후의 가상 돔을 비교해 변경된 부분만 실제 돔에 반영한다.

Stateless component vs. Stateful component

1. 상태가 없는 컴포넌트(Stateless component) : state를 가지지 않는 컴포넌트. 함수와 비동기 처리만으로 상태관리 라이프 사이클을 적용한다.

2. 상태가 있는 컴포넌트(Stateful component) : state를 가지고 있는 컴포넌트. 클래스형에서는 생성자 인스턴스에서 this를 통해서, 함수형에서는 useState를 사용해서 state에 접근하고 이를 관리한다.

FLUX?

• MVC 패턴의 대안 - MVC 패턴은 양방향 데이터 흐름을 가지고 있으며, 규모가 클수록 데이터가 어떻게 변경되는지 추적하기 어렵고 많은 모델 전부를 제어한다는 문제를 가지고 있다.
• 단방향 데이터 흐름
• UI 데이터를 변경할 때마다 직접 store와 동기화하는 것이 아니라 action을 일으켜 store에 변경 사항을 업데이트해주고, 그 변경사항을 UI에 전달해준다.

Redux

• 자바스크립트를 위한 상태 관리 프레임워크. 리액트를 사용할 때 리덕스를 같이 사용하는 경우가 많은데
  같은 상태값을 다수의 컴포넌트가 필요로 할 때,
  부모 컴포넌트에서 깊은 곳에 있는 자식 컴포넌트에 상탯값을 전달할 때,
  페이지가 전환되어도 데이터가 있어야할 때
  등 다양한 상황에서 용이하기 때문이다.

1. action: UI에서 상태변경이 일어난 모든 사건(dispatch)
2. reducer: 사건에 따른 상태값에 대한 변화를 일으킨다.
3. store: 상태값들이 있는 저장소

Redux 3가지 원칙

1. Single Source of Truth: 전체 상탯값을 하나의 객체에 저장한다. 단 한 개의 store만 사용한다.
2. State is ReadOnly: 상탯값은 불변의 객체이다. view에서 state를 직접 접근하여 변경할 수 없다. 액션 객체와 함께 dispatch 메서드를 호출하는 것만이 상탯값을 변경하는 유일한 방법이다.
3. Changes are made with Pure Functions: 상탯값은 부수효과(side-effect)가 발생하지 않는, 같은 인수에 대해 항상 같은 값을 반환하는 순수함수에 의해서만 변경되어야한다. Redux에서는 이를 reducer라고 부른다.