리액트란?
프론트앤드 자바스크립트 프레임워크로 언급되어지지만, 페이스북에서 만든 자바스크립트 라이브러리이다.
사용자 인터페이스를 만들기 위한 툴이다 라고 정의하고 있다.
왜 리액트를 배워야하는가?
오늘날에는 많은 자바스크립트 프레임워크들을 이용할 수 있다.(angular, node.. )하지만 리액트는 그 사이에서 가장 인기있는 라이브러리로 자리잡고 있다. 이전의 프레임워크는 DOM(Document Object Model)을 사용하는 전통적인 데이터 흐름 구조를 따르고 있다. DOM이란, 웹 페이지가 로드되었을 때마다 브라우저에서 생성되는 object 이다. DOM은 백엔드에 데이터를 추가하거나 생성하고, 변화가 생겼을 때마다 같은페이지에 새로운 DOM을 생성한다. 이러한 반복적인 DOM의 생성은 불필요한 메모리 누수를 발생시키고, 어플리케이션의 성능을 감소시킨다.
따라서 리액트는 이런 문제를 해결할 수있도록 만들어졌다. 다양한 컴포넌트를 만들어서 어플리케이션을 개발할 수 있고, 가상DOM을 사용해서 데이터가 변경된후 브라우저의 DOM을 직접 조작하는 대신 가상DOM을 생성하여 기존의 DOM과 비교하여 어떤 변경 사항이 있는지 찾아내고 변경 해야 할 부분만 변경한다.이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능을 개선시킬수 있다. 또한 가상DOM은 렌더링이 되지않기 때문에 연산비용도 적다.
리액트 특징
- JSX(자바스크립트 구문 확장)
- 가상 DOM
- 단방향 데이터 바인딩
- 성능
- 확장기능
- 컴포넌트
- 간단
각각에 대해 살펴보자.
JSX(Javascript Syntax Extension) : JSX는 HTML과 Javascript의 조합이다. HTML요소 내부에 Javascript개체를 포함할 수 있다.JSX는 코드를 쉽고 이해하기 쉽게 만든다.
가상DOM : 일반적으로 JavaScript 프레임워크는 전체 DOM을 한 번에 업데이트하므로 웹 애플리케이션이 느려진다. 그러나 리액트는 실제 DOM의 정확한 사본인 가상DOM을 사용한다. 웹 애플리케이션에 수정이 있을 때마다 가상DOM이 먼저 업데이트되고 실제DOM과 가상DOM의 차이점을 찾는다. 차이점을 찾으면 DOM은 최근에 변경된 부분만 업데이트하고 모든 것이 동일하게 유지된다.
단방향 데이터 바인딩 : 데이터가 한 방향으로만 흐른다. 즉, 데이터는 위에서 아래로, 상위 구성요소에서 하위 구성요소로 전송된다. 자식 구성요소의 속성(props)은 데이터를 부모 구성요소로 반환 할 수 없지만 부모구성요소와 통신하여 제공된 입력에 따라 상태를 수정할 수 있다. 이것이 단방향 데이터 바인딩의 작업 프로세스이다.
성능 : 앞서 말했듯이, 리액트는 가상DOM을 사용하여 수정된 부분만을 업데이트 한다. 따라서 DOM이 더 빠르게 실행된다. DOM은 메모리에서 실행되므로 DOM을 더 빠르게 실행하는 별도의 구성요소를 만들수 있다.
확장기능 : 리액트는 UI응용프로그램을 만드는데 사용할 수있는 많은 확장기능들이 있다. 모바일 앱 개발을 지원하고 서버측 렌더링을 제공한다. 리액트는 Flux, Redux, React Native등으로 확장되어 보기좋은 UI를 만드는데 도움이 된다.
컴포넌트 : 리액트는 한개한개의 기능이 부품으로 나누어져 있어, 어플 개발에서는 그것들을 조합해 사용한다.
부품을 조합해 사용하는 방식을 컴포넌트지향이라고 부른다. 한 개의 기능이 한개의 부품으로서 적용되기 때문에 관리하기 쉽고, 소스코드의 수정 후에 관계없는 부분까지 바뀌게 되는 사고가 발생하지 않는다.
간단 : 리액트는 배우기가 간단하고 애플리케이션을 만들 때 복잡함이 적다.
이상. 리액트에 관한 기본 개념에 대해 알아보았다. 천천히 공부해나가며 정리해보려 한다.
열심히 하자.
