[React / What is react.js??] 리액트

리액트 컨셉

---

불변성

복잡한 특징들을 구현하기 쉽게 만든다. 직접적인 데이터 변이는 이전 이력을 유지 및 재사용할 수 없다.

변화감지

직접적인 변이는 변경을 감지하는 것이 어렵다. 참조하고 있는 불변 객체가 이전 객체와 다르면 객체는 변한것이라 판단한다.

재(再)렌더링

불변성과 변화감지를 이용하여 순수 컴포넌트를 만들고 이를 이용하여 데이터가 변화할 때 즉각적으로 재렌더링을 실행한다.

render 함수

render() { /\* pass /\* };

render 함수는 컴포넌트(레이아웃, 기능 등)를 정의한다. 해당 함수는 html 형식의 문자열이 아닌 뷰의 shape과 behave를 정의한 객체를 반환한다. 최상위 컴포넌트의 렌더링이 끝나면 해당 객체들을 이용하여 DOM 안에 mount한다. (1. 문자열 형태의 HTML 코드를 생성 2. DOM에 해당 내용을 주입)

reconciliation (조화 과정)

리액트의 뷰는 '변형' 되는것이 아니라 새로운 요소로 '교체'된다. 해당 작업 역시 render 함수가 담당한다. 컴포넌트가 데이터를 업데이트했을 때 해당 과정에서 생성된 새로운 데이터를 활용하여 render 함수가 또 다시 호출되며 그러한 과정에서 새로운 view가 생성된다.

Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. Virtual DOM은 DOM(이미 추상화 된)의 추상적 개념이다. 데이터가 변경되면 1. View 영역을 Virtual DOM에 리렌더링 2. 이전 Virtual DOM과 현재의 것을 비교 3. 바뀌 부분만 실제 DOM에 적용

클래스 컴포넌트

---

import React, { Component } from  'react';

class App extends Component {
    render() {
        ...
        return ...
    }
}

export default App;

특징 및 차이점

함수 컴포넌트는 컴포넌트의 default가 함수의 형태이며 반환할 값에 template을 클래스형 컴포넌트에는 render 메서드에 사용할 데이터와 return문을 함께 명시하여 준다. 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있으며 임의 메서드를 정의하여 사용할 수 있다.

state vs props

리액트의 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. (vue.js에서는 store의 프로퍼티, 즉 상태 값을 의미) props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며 컴포넌트에서는 읽기 전용으로만 사용한다. (vue.js에서는 props는 전달되는 데이터 값이며 읽기전용이 아닌 초기화 값으로 사용)

state vs useState

두가지의 state 값이 존재하며 클래스형 컴포넌트에서는 state를, 함수 컴포넌트에서는 useState를 사용한다.

Property Initializer Syntax

클래서형 컴포넌트의 메서드 바인딩은 생성자 안에서 처리하는 것이 Best Practice이지만 불편하고 코드량이 많아지며 구현부가 파편화되고 관리 이슈가 생길 수 있다. transform-class-properties를 사용하면 이를 회피할 수 있다.

ref

ref(=reference)는 id를 대체하는 리액트의 선택자이다. 특정 엘리먼트를 직접 핸들링할 경우에는 id 대신에 ref를 사용하여 처리한다. ref를 설정하는 가장 기본적인 방법은 1.콜백 함수를 활용하는 방법이며 2. createRef 함수를 사용하는 방법이 있다.

SyntheticEvent (합성 이벤트)

합성 이벤트는 네이티브 이벤트와 다르게 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없다. 비동기적으로 이벤트 객체를 참조하려면 e.persist() 함수를 호출한다.