리액트(React)란?
리액트는 페이스북에서 제공해주는 프론트엔드 라이브러리이다.
페이스북이 리액트를 만들기 전에도 이미 수많은 프레임워크들이 존재했고, 현재까지도 사용되고 있다.
이 프레임워크들은 MVC패턴 또는 MVVM(View Model) 등의 패턴으로 애플리케이션을 구조화하고 있다.
즉, 이벤트가 발생했을 때 모델(Model)에서 데이터를 처리하여 그 정보를 바탕으로 화면을 담당하는 뷰(View)를 변화시켜준다. 이 과정은 간단해 보이지만, 애플리케이션 규모가 크면 상당히 복잡하고 성능도 떨어진다는 단점이 있다.
여기서 페이스북 개발팀이 생각한 아이디어는, 데이터가 변할 때마다 어떤 변화를 줄지를 고민하는 것이 아니라
“기존 뷰(View)를 날려 버리고 Virtual DOM을 사용하여 처음부터 새로 렌더링” 하는 방식으로 좀 더 빠른 속도로 뷰(View) 를 변경시켜주게 된다.
이렇게 만들어지게 된 것이 React(리액트) 이다. 이 리액트의 특징을 알아보자.
리액트의 특징
1. 컴포넌트(Component) 구조
컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 뜻한다.
리액트는 모든 것이 컴포넌트이다. 컴포넌트는 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발할 수 있게 해주기 때문에 캡슐화, 확장성, 결합성, 재사용성 등과 같은 이점이 있다.
웹 컴포넌트의 중요성에 대해서는 이곳을 참고하자.
2. 단방향 데이터 흐름
리액트에서는 부모 컴포넌트와 자식 컴포넌트간에 데이터를 전달할수 있는데, 데이터를 전달할 때 부모에서 자식에게로만 데이터가 전달이 가능하다.
양방향 데이터 바인딩을 사용할 때처럼 작성할 코드의 양이 확연히 줄거나 하지는 않지만 애플리케이션의 데이터를 관리하는 모델 컴포넌트가 있고 그 데이터를 UI 컴포넌트에 전달하는 단순한 데이터 흐름으로 이해하고 관리하기 쉬운 애플리케이션을 만들 수 있다.
3. JSX
JSX는 자바스크립트 확장문법으로 템플릿엔진이라 불리는 것과 유사한 방식의 표현식이다.
간단히 말해, 자바스크립트 문법과 HTML 태그가 혼용되어 사용되는 방식이다.
JSX를 사용하는 이유는 다음과 같다.
- HTML 친화적이라 어렵지 않게 작성할 수 있다.
- 마크업과 로직을 분리하지 않고 UI 작성이 가능하다.
- React 컴파일 과정에서 에러를 감지할 수 있다.
4. Virtual DOM
DOM은 Document Object Model의 약자이다.
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다.
React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다.