🖋️ React 란?

단일 페이지 애플리케이션의 사용자 인터페이스를 구축하는 데 사용되는 널리 사용되는 JavaScript 라이브러리

구성 요소 기반 아키텍처, 가상 DOM, JSX와 같은 React의 디자인과 기능은 React를 동적 및 반응형 웹 인터페이스 개발을 위한 강력하고 효율적이며 유연한 라이브러리

• 컴포넌트 기반 아키텍처

* 재사용 가능한 구성 요소
자체 상태를 관리하는 재사용 가능한 UI 구성 요소의 개발을 권장
이 모듈식 접근 방식을 사용하면 코드를 더 쉽게 관리하고 디버깅 가능

* 구성
복잡한 UI는 더 작고 독립적이며 재사용 가능한 구성 요소로 구축

• JSX (자바스크립트 XML)

* 구문 확장
HTML과 유사한 JavaScript용 구문 
이를 통해 개발자는 JavaScript 코드와 
동일한 파일에 HTML 구조를 작성 가능

* 향상된 생산성
구성 요소 렌더링 구조를 더욱 명확하게 만들어 
코드의 가독성과 유지 관리성을 향상 

• 가상 DOM

* 효율적인 업데이트
DOM(Document Object Model)의 가상 복사본을 생성
구성 요소의 상태가 변경되면 React는 먼저 가상 DOM의 개체를 변경
그런 다음 가상 DOM은 객체를 원본 DOM과 비교하고 
실제 DOM에서 변경된 항목만 업데이트

* 성능 개선
이 프로세스는 속도가 느린 DOM의 직접 조작을 최소화하여 
애플리케이션 성능과 효율성을 향상

• 단방향 데이터 바인딩

* 단방향 데이터 흐름
코드를 더 쉽게 이해하고 디버그할 수 있도록 하는 
단방향 데이터 흐름(상위 구성 요소에서 하위 구성 요소로)을 따름

* 상태 및 속성
구성 요소는 속성(props)을 통해 
상위 요소로부터 데이터를 받고 자체 상태(state)를 관리

• UI 선언

* 선언적 성격
선언적 방식으로 UI를 설명
데이터가 변경되면 React는 변경된 UI 부분만 업데이트하여 
프로그래밍 모델을 단순화하고 성능을 향상시키는 방법을 알고 있음

* 디버깅이 더 쉬움
선언적 코드가 더 예측 가능하고 디버깅하기가 더 쉽기 때문

• 리액트 훅

* 상태가 있는 기능적 구성요소
React 16.8에 도입된 후크를 사용하면 
기능적 구성요소에서 상태 및 기타 React 기능을 사용 가능

* 재사용성 및 구성
후크를 사용하면 로직을 React 구성 요소 수명 주기 전체에 걸쳐 
분할하는 대신 재사용 가능한 기능으로 로직을 구성

• 커뮤니티와 생태계

* 대규모 커뮤니티
대규모 개발자 커뮤니티가 있음
이는 학습을 위한 광범위한 리소스와 다양한 타사 라이브러리 및 도구를 의미

* 강력한 생태계
상태 관리를 위한 Redux 및 탐색을 위한 
React Router와 같은 도구는 React의 기능을 향상

• 서버 측 렌더링(SSR)

* SEO 친화적
서버 측에서 렌더링 가능
즉, 검색 엔진에서 콘텐츠를 색인화할 수 있으므로 
웹 애플리케이션이 더욱 SEO 친화적일 수 있음

* 더 빠른 초기 로드
SSR은 또한 더 빠른 초기 페이지 로드 시간을 제공하여 사용자 경험을 향상