🍬 리액트(React)란?
- 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리
- 사용자 인터페이스를 구축하기 위한 도구
- 주로 단일 페이지 애플리케이션(SPAs)을 개발하는 데에 사용됨
- UI를 작은 독립적인 컴포넌트로 나누어 개발 및 관리
🍭 특징
- 가상 DOM
가상 Document Object Model(Virtual DOM)을 활용하여 화면을 업데이트함으로써 효율적인 렌더링 구현 - 컴포넌트 기반 아키텍처
UI를 작은 컴포넌트로 분해하여 개발 및 유지보수를 용이하게 함 - JSX
자바스크립트와 HTML을 결합한 JSX 문법을 사용하여 UI를 선언적으로 작성 가능 - 단방향 데이터 흐름
데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐름
데이터 흐름이 예측 가능, 디버깅 용이
🍭 장점
- 뛰어난 성능
가상 DOM 및 효율적인 업데이트 메커니즘을 통해 빠른 화면 렌더링을 제공 - 컴포넌트 재사용성
UI를 작은 조각으로 분해하여 개발하므로 컴포넌트의 재사용성이 높음 - 생태계의 확장성
다양한 라이브러리와 도구를 활용하여 개발 생산성을 높임
🍭 단점
- 학습 곡선
리액트는 처음에는 다소 복잡하게 느껴질 수 있음
JSX 문법과 단방향 데이터 흐름을 이해하는 데 시간이 걸릴 수 있음 - 복잡한 상태 관리
대규모 애플리케이션에서 상태 관리가 복잡해질 수 있으며, 이에 대한 적절한 해결책이 필요할 수 있음
🍬 컴포넌트란?
- 리액트 애플리케이션을 구성하는 재사용 가능한 작은 조각
- 각 컴포넌트는 자체적인 상태를 가질 수 있고, UI를 나타내며, 일부 동작 처리 가능
- 여러 개의 컴포넌트를 조합하여 리액트 애플리케이션을 만들 수 있음
- 컴포넌트는 보통 함수형 컴포넌트 또는 클래스형 컴포넌트로 작성됨 (최근에는 함수형 컴포넌트와 훅(Hook)을 사용하는 것이 일반적이지만, 클래스형 컴포넌트도 여전히 사용됨)
