Do it! 리액트 프로그래밍 정석 책을 보고 공부를 시작하며 지금부터의 내용은 책을 바탕으로 요약 및 정리 그리고 추가한 내용들을 주로 다룰 예정이다.
리액트는 프런트엔드 프레임워크 중 하나로 여러 프레임워크중에 하나이다.
주목받는 프런트엔드 프레임워크는 리액트를 포함하여 앵귤러, 뷰제이에스가 있는데 아래 그림처럼 리액트가 꾸준한 사랑을 받고 있음을 알 수 있다.

https://npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
@angular/core vs angular vs react vs vue | npm trends
Comparing trends for @angular/core 15.0.4 which has 2,052,676 weekly downloads and 85,717 GitHub stars vs. angular 1.8.3 which has 401,788 weekly downloads and 59,316 GitHub stars vs. react 18.2.0 which has 11,823,219 weekly downloads and 199,982 GitHub st
npmtrends.com
리액트는 페이스북에서 개발하고 공개한 오픈소스 소프트웨어이다.
리액트의 특징은 화면 출력에 특화된 프런트엔드 프레임워크라는 것인데 특징을 나열하면 다음과 같다.
- 컴포넌트로 화면 구성
→ 컴포넌트는 작고 독립적인 코드 블록이며 이를 조합하여 효율적이며 빠르게 화면을 구성합니다.

- 게임 엔진 원리 도입
→ 화면 출력 속도가 빠름
자바스크립트는 제이쿼리와 핸들바 라이브러리를 사용해 화면을 구성하는데 이 라이브러리는 매우 간결하다는 특징이 있지만 화면이 커질수록 화면을 그리는 시간도 길어진다. 그 이유는 화면의 일부만 바뀌어도 화면 전체를 다시 그리기 때문.

특정 노드를 수정하면 관련된 모든 노드를 다시 그려야 하니 코드가 길어질수록 화면을 띄우는 시간은 길어집니다. 이런 문제를 해결하기 위해 게임 엔진 원리를 도입했다고 합니다.
게임엔진 원리는 다음 장면에 필요한 화면을 미리 그려두어 화면을 빠르게 전환하는 방법을 말합니다.
Virtual DOM

'개발 > WEB(프론트엔드)' 카테고리의 다른 글
GitHub Pages 배포시에 만난 404에러 (0) | 2023.01.27 |
---|---|
React 공부를 시작하며 (0) | 2023.01.05 |