[React] React란?

 

리액트는 페이스북에서 개발한 오픈소스 자바스크립트 라이브러리이다. 기존의 웹 기술 HTML, CSS 등과 결합하여 사용할 수 있고, 자바스크립트만으로 뷰단을 개발할 수 있어 사용이 편리하다. 특징으로는 가상의 DOM을 활용하는 것과 컴포넌트 재사용성, 단방향 데이터 흐름 등이 있다.

 

가상의(Virtual) DOM은 사용자가 보고 있는 UI와 변경될 UI의 변경 사항을 체크하여 변경될 부분만 재조정할 수 있도록 메모리에 보관하고 있는 UI 사본이라고 할 수 있다. 변경된 부분만 재조정하기 때문에 불필요한 연산을 줄일 수 있다.

 

컴포넌트란 (공식 문서의 표현을 빌리자면) '작고 고립된 코드의 파편'이다. 하나의 화면을 구성할 때 여러 작은 컴포넌트를 섞어서 구성할 수 있고, 컴포넌트의 자식 컴포넌트를 생성하는 등의 방법으로 데이터 흐름을 제어할 수 있다. 개별 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 화면에 비추고자 하는 내용을 반환합니다. 이때 JSX라는 문법을 주로 사용합니다.

 

JSX란 자바스크립트를 확장한 문법으로 JavaScript as XML의 약자이다. 하나의 파일에 자바스크립트와 html 코드를 함께 작성할 수 있다. 리액트에서 로직과 마크업을 다른 파일에 넣어 인위적으로 분리하는 대신, 컴포넌트 내에서 JSX 코드를 이용해 로직과 마크업이 함께 있도록 구현한 것이다. 

 

JSX 특징

1. 바벨 등을 통해 컴파일 된다. 컴파일 된 후, JSX 표현식은 정규 자바스크립트 함수 호출이 되고, 자바스크립트 객체로 인식된다. 즉, JSX도 표현식이다.

2. 중괄호를 사용해 자바스크립트 표현식을 포함할 수 있다.

3. 최상단에 반드시 단일 부모가 존재해야 한다. 이 때문에 <> 빈 태그를 사용하기도 한다.