UTF-8,react,reflow

1.UTF-8(Unicode Transformation Format - 8bit)

UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나.

UTF-8로 표현 가능한 길이는 최대 6바이트지만 다른 인코딩과의 호환을 위해 4바이트까지만 사용한다.

그래서 한 글자가 1~4바이트 중 하나로 인코딩될 수 있으며, 1바이트 영역은 아스키 코드와 하위 호환성을 가진다.

 

장점:

기존의 HTML 태그나 자바스크립트 등 아스키로 구축된 사이트를

별다른 변환 처리 없이 그대로 쓸 수 있는 엄청난 장점이 있었다.

크로스플랫폼 호환성도 뛰어났다.

실체 처리속도도 더 빠르다든가 하는 엔지니어링 측면에서의 수많은 장점도 존재한다.

 

가장 큰 장점은

 

단일인코딩 UTF-16은 하위 인코딩 문제가 매우 심각했는데,

인코딩에 여러 하위 방식이 존재해 읽을 때마다 그냥

UTF-16이라고만 하면 절대 디코딩을 할 수 없었다고 한다.

 

2.React

웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

facebook에서 제공해주는 프론트엔드 라이브러리

즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있습니다.

 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용

 

특징

 

1.Data Flow 

 

흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다.

 

2.Component 기반 구조

 

소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 불 수 있다.

각각의 컴포넌트(부품)들을 조립해 화면을 구성한다.

컴포넌트 단위로 쪼개져있어서 전체 코드를 파악하는데 쉽다.

코드의 재사용성이 높다.코드의 유지보수가 좋다.

 

3.Virtual DOM(Document Object Model)

 

DOM은 html,xml,css 등을 트리구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.

 

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때 마다 실제 DOM과 비교하고

전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의

효율성과 속도를 개선할 수 있다.

 

4.Props and State

 

props :

부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.

쉽게 읽기 전용 데이터로 생각하면 좋습니다. 자식 컴포넌트에서 전달받은 props는 변경불가,

props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

 

state:

컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다.

state는 동적인 데이터를 다룰 때 사용하며, 사용자와의

상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다.

클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.

 

3.ReFlow

브라우저 랜딩 과정의 핵심.

리플로우(reflow)는 생성된 DOM 노드의 레이아웃 수치(위치, 높이, 너비 등)가 변경되었을 때,

발생하는 재배치라고 할 수 있다. 변경시 영향 받은 모든 노드의 수치를 계산해서 렌더 트리를 재 생성하는 것이다.

이 Reflow 과정을 마친 후에 재 생성된 렌더 트리를 다시 그리는데 그것이 리페인트(Repaint)이다.