[React]리액트의 핵심 특징

리액트(React)의 핵심 특징

선언적 UI

리액트는 선언적 UI를 지향하는 라이브러리로, 사용자 인터페이스를 어떻게 표현할지에 중점을 둔다

선언적 UI의 핵심 아이디어는 원하는 상태(데이터)를 정의하고, 리액트가 자동으로 UI를 업데이트하도록 하는 것이다

이는 코드를 직관적이고 예측 가능하게 만들어 유지보수와 개발을 용이하게 한다

 

JSX 문법

JSX는 JavaScript의 확장 문법으로, 리액트에서 UI 구조를 선언하는 데 사용한다

XML과 유사한 문법을 가지며, JavaScript 코드 안에서 UI 요소를 표현할 수 있도록 도와준다

JavaScript 코드 안에서 직관적으로 컴포넌트를 작성할 수 있어, 가독성과 유지보수성이 향상됨

 

가상 DOM (Virtual DOM)

 

가상 DOM은 리액트의 성능 최적화를 담당하는 핵심 기술 중 하나로

실제 DOM과는 별도로 가상으로 구성된 DOM(실제 DOM의 가벼운 복제본)을 메모리 상에 유지하고,

변경이 필요한 시점에서 실제 DOM과 비교하여 최소한의 변경만을 적용하게 되면서

렌더링 작업의 속도를 향상 시켰다고 보면된다

효율적인 UI 업데이트를 가능하게 하며, 웹 애플리케이션의 성능을 향상 시킬수 있게 되었다

 

컴포넌트 기반 구조

 

리액트는 컴포넌트 기반의 아키텍처를 채택하여, UI를 독립적이고 재사용 가능한 작은 조각들로 나눌 수 있게 되었다

 

즉, 웹 페이지의 헤더, 사이드바, 컨텐츠 영역 등을 각각 별도의 컴포넌트로 개발이 가능하고

전체 페이지를 구성 할때 각각 독립적으로 동작는 컴포넌트를 조합하여 구성 할 수 있다

 

각 컴포넌트는 자체적으로 상태(state)를 관리할 수 있고, 부모-자식 관계를 통해 데이터를 전달하면서 유기적으로 연결되게 되면서

모듈화와 재사용성을 높여 개발 생산성을 향상 시킬 수 있게 되었다