리액트란?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리. 페이스북을 개발할 때 사용한 기술이며, 공개 소프트웨어입니다. 리액트의 핵심인 "컴포넌트"라는 UI 구성 요소를 사용해 화면을 구성합니다.

📚라이브러리? ⛓프레임워크?
라이브러리(Library)란?
프로그래머가 응용 프로그램 개발을 위해 필요한 기능(함수)을 모아 놓은 것

프레임워크(Framework)란?
응용 프로그램이나 소프트웨어의 솔루션 개발을 수월하게 하기 위해 제공된 소프트웨어 환경

둘의 차이는?
가장 중요한 차이점은 응용 프로그램의 흐름 주도권을 누가 가지고 있는가이다.
정해진 규칙에 따라 사용해야 하는지(프레임워크), 필요할 때 호출해서 사용할 수 있는지(라이브러리)

(추가) API(Application Programming Interface)란?
응용 프로그램에서 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스(약속)

리액트 특징

Virtual DOM

웹 페이지에서 변화가 발생하면 DOM을 수정하게 되는데, 렌더링 과정이 다시 진행됩니다. 이것은 DOM의 각 노드에 대한 연산을 다시 수행함으로 웹 서비스의 성능을 저하시키는 원인이 됩니다. 또한 웹 사이트의 DOM tree가 매우 커지고 있는만큼 이를 탐색하고 관리하는 것은 매우 어렵기도 하죠.😇

이렇게 등장한 개념이 Virtual DOM입니다. HTML DOM을 복사한 가상의 DOM을 가지는데 변화가 생기면 기존의 DOM과 비교해서 해당 부분만 업데이트하는 방식입니다. 먼저 가상 DOM에서 모든 연산을 수행해 실제 DOM 조작을 최소화합니다.
전체 가상 DOM 업데이트 ➡ 실제 DOM과 비교 (변경점 파악) ➡ 실제 DOM에서 업데이트

컴포넌트 기반

리액트는 컴포넌트라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성합니다.
기존의 웹 프레임워크는 MVC(Model View Controller) 방식으로 사용자 인터페이스로부터 비즈니스 로직을 분리하여 각자 역할에 집중하여 개발했습니다. 이 방식은 코드 관리를 효율적으로 할 수 있다는 장점이 있으나 서로 의존성이 높아 재활용은 어렵습니다.
컴포넌트는 MVC의 V(View)를 독립적으로 구성하여 레고 블록처럼 조립해 UI를 구성하고 재사용할 수 있습니다.

선언형

함수형 프로그래밍? 선언형 프로그래밍?
명령형 프로그래밍은 프로그래밍을 할 때 어떻게(How)에 집중하는 것을 말하며 선언형 프로그래밍은 무엇(What)에 집중하여 프로그래밍을 하는 것을 말합니다. 명령형 방법을 사용하는 경우 개발자는 컴퓨터에서 목표를 이루기 위해 수행해야 하는 단계를 매우 자세히 설명하는 코드를 작성해야하는 반면 선언형 방법은 문제를 해결하는 것 즉, 함수의 적용을 강조합니다.

애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. - "리액트 공식문서"

Reference

📗 리액트 공식문서
📗 프레임워크와 라이브러리의 차이
📗 리액트란?