[React] 2. 리액트란? - 개념 / 특징
1) 리액트(React)란?
리액트(React): 자바스크립트의 UI 오픈소스 라이브러리.
리액트는 가장 많이 쓰이는 자바스크립트의 대표적인 라이브러리이자 사용자 인터페이스(UI)를 만들기 위한 프레임워크 중 하나이고 브라우저에서 동작하는 복잡하고 여러가지 기능을 가진 자바스크립트 파일들을 쉽게 만들어내는 기술입니다. 웹 및 모바일 앱의 view layer를 처리하는 데 사용되며, 재사용 가능한 UI 구성요소를 만들 수 있습니다.
리액트를 사용하지 않아도 웹 페이지를 만들 수는 있으나, 리액트와 같은 프레임워크를 이용하다면 훨씬 편리하고 효율적으로 코드 작성을 할 수 있습니다.
2) 리액트가 필요한 이유
리액트가 필요한 이유는 너무나도 많지만 그중에 가장 대표적으로 소개되는 기본적인 특징 세 가지만 알아보겠습니다.
① 컴포넌트화 방식
컴포넌트(Component)화 방식: 공통 요소를 컴포넌트로 만들어 사용하는 방식.
우리가 사용하는 대부분의 웹 사이트들에는 공통되는 요소들이 많이 있습니다. 이 공통 코드들을 계속해서 중복 작성해 놓은 상황에서 수정 사항이 생기면 해당 부분이 쓰인 모든 파일들을 일일이 수정해야 하는 끔찍한 일이 벌어집니다.
(산탄총 수술, Shotgun Seurgery)
하지만 리액트를 사용하면 이러한 상황을 피할 수 있습니다.
리액트는 컴포넌트 기반의 UI 라이브러리이기 때문에 모든 html 요소들을 컴포넌트로 만들어 재사용할 수 있습니다.
다른 페이지에서도 공통적으로 사용될 것으로 예상되는 요소들을 별도의 파일이나 모듈로 제작해놓은 뒤에 그것이 필요한 파일들에 컴포넌트 이름으로 불러다가 쓰는 방식이 리액트의 첫 번째 특징인 컴포넌트화 방식입니다.
이러한 방식을 이용하면 수정 사항이 생겼을 때 컴포넌트가 정의된 파일 하나만 수정하면 되고, 그 파일을 불러다가 사용하는 다른 페이지들은 자동으로 수정이 되기 때문에 수정이 훨씬 수월해져 유지보수가 쉬워집니다.
② 선언형 프로그래밍 방식
선언형 프로그래밍 방식: 어떤 방법으로 해야하는지를 나타내기보다, 최종적으로 무엇을 해야 하는지 그 목적을 설명하는 방식. 즉, 목표를 명시하고 그 알고리즘은 명시하지 않는 방식이다.
명령형 프로그래밍은 어떻게 할 것인가에 중점을 두는 반면, 선언형 프로그래밍은 어떻게에 대한 부분은 추상화하고 무엇을 할 것인가에 집중합니다. 따라서 명령형 프로그래밍 방식은 절차를 하나하나 다 나열해야 하지만 선언형 프로그래밍 방식은 목적을 바로 말합니다.
선언형 프로그래밍 방식은 훨씬 더 간결한 코드를 작성할 수 있으며 가독성이나 재사용성이 좋고 오류가 적게 발생한다는 장점이 있습니다.
③ 가상 돔 (Virtual DOM)
DOM: Document Object Model( 문서 객체 모델 ). html 문서의 트리 형태 구조.
웹 브라우저는 html 코드를 효율적으로 해석하기 위해 위와 같은 트리 형태의 구조로 변환합니다.
그런데 잦은 업데이트가 있는 경우, DOM을 계속 변경 해야 하므로 브러우저는 필요 이상의 많은 연산을 수행해야 하고 이것은 결국 성능 저하 문제로 이어집니다.
이런 문제를 해결하기 위한 것인 바로 가상 돔(Virtual DOM)입니다.
가상 돔을 이용하는 방식은 업데이트 과정에서 발생하는 변화들을 실제 돔에 실시간으로 반영하는 것이 아니라, 가상의 돔에 미리 반영한 다음 한 번에 모아 실제 돔에 반영합니다.
