컴포넌트 기반 아키텍처, 재사용성, 단방향 데이터 흐름, 가상 돔, 실제 돔 조작 최소화
리액트는 Meta에서 개발한 웹과 모바일 UI를 구축하기 위한 자바스크립트 라이브러리입니다.
컴포넌트 기반 아키텍처를 사용하여 재사용성을 높이며, 단방향 데이터 흐름을 통해 예측 가능한 상태 관리를 제공합니다. 또한, 가상 DOM(Virtual DOM)을 활용하여 실제 DOM 조작을 최소화하고 성능을 최적화합니다. React는 크로스 플랫폼 개발(React Native), 선언형 UI, 강력한 커뮤니티 지원 등의 장점을 갖추고 있습니다.
JSX, 가상 돔, 디핑, SSR, 단방향 데이터 흐름, 컴포넌트 기반 아키텍처
최근 리액트는 5가지 주요 기능을 가지고 있습니다.
첫번 째는 JSX로, JSX를 사용하여 자바스크립트 코드 내에서 XML과 유사한 구문을 활용해 UI를 선언적으로 작성할 수 있으며, 코드의 가독성과 유지보수성을 높입니다.
두번 째는 가상 돔으로 React는 실제 DOM을 직접 조작하는 대신, 가상 DOM을 사용하여 변경 사항을 효율적으로 비교(diffing)하고 필요한 부분만 업데이트해 성능을 최적화합니다.
세 번째는 SSR로, React는 Next.js와 같은 프레임워크를 통해 서버에서 HTML을 미리 생성해 초기 로딩 속도를 개선하고, SEO에 유리한 환경을 제공합니다.
네 번째는 단방향 데이터 흐름으로 데이터는 부모에서 자식 컴포넌트로만 흐르며, 이를 통해 상태 변경이 예측 가능하고, 애플리케이션의 디버깅 및 유지보수가 용이합니다.
마지막으로 컴포넌트 기반 아키텍처로 UI를 재사용 가능한 컴포넌트로 구성하여 유지보수가 쉬우며, 코드 중복을 최소화하고 개발 속도를 향상시킵니다.
JS + XML, 선언적 UI, 트랜스파일러를 통해 JS로 변환
JSX는 자바스크립트에서 XML과 유사한 문법을 사용하여 UI를 선언적으로 작성할 수 있는 확장 문법입니다. JSX는 코드의 가독성을 높이고, React.createElement()를 직접 호출하는 대신 직관적으로 컴포넌트를 구성할 수 있도록 도와줍니다. JSX 코드는 Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환되며, 동적 표현을 위해 JavaScript 코드와 쉽게 결합할 수 있습니다.