리액트는 컴포넌트 기반의 UI 라이브러리이다.
리액트를 쓰는 이유는 참 많지만 대표적인 3가지 이유
컴포넌트 기반이기 때문에 필요한 컴포넌트들을 쏙쏙 뽑아서 필요한데 적용만 하면 되어 재사용성이 좋고, 수정을 할 경우 컴포넌트 별로만 수정하면 되기 때문에 매우 효율적이다 .
예를 들어 헤더를 수정할 경우 모든 페이지의 헤더를 일일이 수정할 필요없이 헤더 컴포넌트 한개만 수정하면 된다는!!
기존의 자바스크립트 작업이 명령형 프로그래밍으로 절차를 하나하나 나열 해야 했다면 리액트는 그냥 목적을 바로 말하면 된다.
예를들어 카운터를 만들면 이렇다.
=> 코드가 훨씬 간결해진다 !!
Virtual DOM은 실제 DOM과는 별도로 존재하며, 리액트 컴포넌트의 상태나 프로퍼티가 변경될 때마다 가상의 DOM 트리를 생성한다. 그런 다음 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 부분만을 실제 DOM에 적용한다. 이러한 과정을 "Reconciliation" 또는 "Diffing"이라고 합니다. 이로 인해 필요한 최소한의 DOM 조작만을 수행하여 성능이 향상된다.
=> 불필요한 리렌더링을 방지하고 최적화에 대한 부담을 줄여준다. 멋지다!