[React] React/리액트

 

 

React란

- 사용자 인터페이스 구현을 돕는 라이브러리이다.

라이브러리란 함수, 코드, 모듈 등 개발을 위해 짜여진 재사용 가능한 코드의 집합이다. 개발자에게 제어권이 주어진다는 점에서 프레임워크와의 차이점이 존재한다. 프레임워크는 기본 구조와 지침, 규칙을 제공하여 개발자는 이에 따라 코드를 작성해야 되는 반면 라이브러리는 개발자가 필요한 기능들을 호출하여 코드의 흐름과 제어를 직접 관리한다.
 

React의 특징

-가상 DOM

DOM은 Document Object Model(문서 객체 모델)로 HTML문서의 계층적 구조와 정보를 표현하며 프로그램 언어들이 접근하여 조작할 수 있도록 API를 제공하는 인터페이스이다.
DOM은 트리 구조를 지니고 있는데, 사용자의 반응에 따라 트리의 구조가 변경되며 웹사이트의 내용을 갱신한다. 하지만 매번 전체 화면을 새롭게 갱신하는 것은 성능면에 있어서 좋지 않다.
React는 이런 문제를 해결하기 위해서 가상DOM(Virtual DOM)을 도입하였다. 가상 DOM은 실제 DOM의 복사본으로 실제 DOM과의 다른 부분만을 찾아내어 인터페이스를 업데이트한다. 이를 통해 불필요한 조작을 줄였다.
 

-컴포넌트를 통한 재사용

컴포넌트란 UI요소를 이루는  단위이다. 
컴포넌트는 사용자가 직접 태그로 정의할 수 있으며 이를 통해 코드를 간결화하고 생산성을 높일 수 있다.
 

-단방향 데이터 흐름

데이터의 변경이 UI에 전달되어 화면이 업데이트된다.
따라서 프로젝트의 규모가 커져도 데이터의 흐름 파악과 추적이 용이하고 성능 저하도 방지할 수 있다.
 

-JSX문법

javascript를 확장한 것으로 javascript와 xml이 합쳐진 문법이다. 리액트 프로젝트에서 사용되는 언어로 공식적인 언어라 할 수는 없다.
JSX는 브라우저가 실행되기 전에 바벨이 javascript 문법으로 변형된다.
JSX로 인해 코드의 가독성이 높아지고 렌더링을 보다 직관적으로 이해할 수 있다.