React
리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.
리액트 특징
컴포넌트,단방향 데이터 흐름 , 가상 돔
가상 돔
데이터 변화 시에 가상 DOM을 사용한다.
리액트는 데이터의 변화가 있을 경우 DOM에 바로 접근하지 않고
메모리에 저장된 가상 DOM을 리랜더링하여
변경 전의 가상 DOM과 비교하여 변경된 부분만 동기화 한다.
컴포넌트 기반
하나의 기능 구현을 위한 여러 종류의 코드 묶음이다." 혹은 "UI를 구성하는 필수 요소이다.
각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.
단방향 데이터 흐름
리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기 때문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다.
Props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터이다. 자식 컴포넌트에서 전달 받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
State: 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 하는 것과 같이 동적인 데이터를 다룰 때 사용한다.
각각의 state는 독립적이라 다른 컴포넌트에 직접적인 접근은 불가능하다. 그러나 자신보다 상위에 있는 state는 변경이 가능하지만 state를 변경해주는 함수를 props로 받는다면 state의 변경이 가능하다.
리액트 장점
배우기가 간단하고, 애플리케이션을 만들 때 복잡함이 적다.
Controller, directive, template, model 처럼 분리를 하지 않고 Component 단 하나로 관리한다.
뛰어난 Garbage Collection, 메모리 관리 성능을 가지고 있다.
서버 사이드 렌더링과 클라이언트 렌더링을 둘 다 지원한다.
간편한 UI 수정과 재사용이 용이하다.
다른 프레임워크나 라이브러리와 혼용하여 사용할 수 있다. 즉, 개발이 완료된 서비스에도 적응이 가능하다.
