👉 리액트의 등장 배경은?
한마디로 점점 더 동적이고 복잡해져가는 웹,앱 때문이라고 할 수 있다.
- 동적이고 복잡한 웹 페이지가 늘어나면 크기가 커짐. 이로 인해 자바스크립트 파일 관리, 상태 관리가 힘들어짐.
- 페이지 간에 이동 시에 HTML, CSS, Javascript 파일을 서버와 주고받아야 하기 때문에 속도가 느려짐.
이런 이유로 최대한 성능을 아끼고 편안한 사용자 경험(user experience)을 제공하면서 구현하고자 개발한 것이 바로 리액트(React)인 것!
👉 리액트의 장단점은?
1. 장점
1) VDOM (Virtual Dom)을 통한 효율적인 렌더링 구현
VDOM을 사용해 효율적인 렌더링을 구현함. 변경된 부분만 감지해 업데이트하기 때문에 성능, 사용자 경험이 향상된다.
-
DOM (Document Object Model)
문서 객체한 HTML, head, body와 같은 태그들을 Javascript가 이용할 수 있는 객체로 트리 구조로 변환한 것. -
VDOM (Virtual Dom, 가상돔)
Dom의 문제를 해결하기 위한 기술로 실제 DOM을 직접 조작하지 않고, 추상화한 자바스크립트 객체를 구성하여 사용해서 변경된 부분만 감지하여 업데이트 함.
2) 컴포넌트 기반 아키텍처
리액트는 컴포넌트 기반 아키텍처를 채택해 코드의 재사용성, 유지보수성을 높인다. 작고 독립적인 컴포넌트들을 조합해 웹 애플리케이션 구축이 가능하며, 각 컴포넌트는 자체적인 상태(State)와 생명주기(LifeCylce)을 가짐.
- 컴포넌트(component)
리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체로 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함.
3) 가독성과 유지보수성
자바스크립트와 JTML을 조합한 JSX(JavaScript XML) 리액트 문법은 가독성이 높으며, 명확한 컴포넌트 구조 표현이 가능함. 이를 통해 코드를 쉽게 이해하고 유지보수할 수 있음.
2. 단점
복잡한 프로젝트에서의 관리가 어려울 수 있음. UI 렌더링에 초점이 맞춰졌기 때문에 상태 관리, 라우팅, 서버 통신 등의 기능은 별도의 라이브러리와 프레임워크를 함께 사용해야 함. 그로 인한 충돌이 발생할 수 있음.
