React란?

React란?

React.js는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로,
재사용 가능한 컴포넌트를 기반으로 하는 선언적이고 효율적인 UI 개발을 가능하게 한다.
가상 DOM을 사용하여 성능을 최적화하고, 단방향 데이터 흐름을 통해 애플리케이션의 상태 관리를 단순화하는데 용이하다.

React는 프레임워크가 아닌 라이브러리이고
메타(페이스북)와 개발자 커뮤니티에 의해 유지 관리되고 있다.

React의 특징

• 컴포넌트 기반 구조
• 가상 DOM (Virtual DOM)
• 단방향 데이터 흐름 (One-way Data Binding)
• JSX

컴포넌트 기반 구조

애플리케이션을 독립적이고 재사용 가능한 부분으로 나누어 코드의 유지 관리를 용이하게 하고,
대규모 프로젝트의 개발 효율성을 향상시킨다.
각 컴포넌트는 자체적인 상태와 로직을 가지고 있고, 다른 컴포넌트와 결합하여 복잡한 사용자 인터페이스를 구성한다.

재사용 가능한 컴포넌트는 개발 효율성과 유지보수를 크게 향상시킨다.
또한, 애플리케이션의 다양한 부분을 독립적으로 개발하고 재사용함으로써 일관된 UI 유지와 확장성을 제공한다.

 

가상 DOM

가상 DOM은 실제 DOM의 가벼운 복사본이다.
React는 컴포넌트의 상태가 변경될 때마다 가상 DOM을 사용하여 변경사항을 먼저 계산하고,
최소한의 DOM 조작으로 화면을 업데이트한다.
가상 DOM 방식은 애플리케이션의 성능을 향상시키며, 더 효율적인 데이터 처리와 빠른 렌더링을 가능하게 만든다.

 

단방향 데이터 흐름

React의 단방향 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 데이터가 흐르는 구조로,
각 컴포넌트는 상위 컴포넌트로부터 받은 props를 통해 데이터를 전달받는다.
애플리케이션의 데이터 흐름을 예측 가능하게 만들고, 각 컴포넌트의 역할을 명확히 하여 유지보수를 쉽게 만들어 준다.
또한, state는 각 컴포넌트 내부 또는 중앙에서 관리되어 데이터 관리의 복잡성을 줄인다.

 

JSX

JSX (JavaScript XML)는 React에서 사용되는 문법 확장이다.
JSX를 사용하면 UI 구조를 JavaScript 코드 내에서 HTML과 유사한 문법으로 직관적으로 표현할 수 있다.

JSX는 선언형 프로그래밍으로 UI와 관련된 코드를 직관적으로 이해하는데 도움을 준다.