-
728x90
리액트(React)란?
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
리액트 역사
리액트의 역사를 알기 전 알아야할 개념을 우선 설명하겠습니다.
DOM (Document Object Model)
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
DOM 소개 - Web API | MDN
이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에
developer.mozilla.org
가상 DOM
React에서의 가상돔 개념
🙄 리액트로 프로젝트를 만들고 있지만 아직까지도 모호한 개념들이 많아 짬이 나는 시간에 한 번 더 정리해 보기로 합니다.가상돔을 알기 위해 우선 돔의 개념부터 정리해 보자.DOM(Document Object
velog.io
SPA (Single Page Application)
서버에서 HTML을 생성하고 브라우저는 출력하기만 하는 기존의 방식과 달리 서버에서 하던 대부분의 작업을 브라우저에서 JavaScript로 처리하는 개발 방법입니다.
리액트는 SPA를 개발하는 대표적인 라이브러리입니다.
리액트 탄생 배경
JS로 DOM을 다루는 작업이 많아지면서 유지보수가 어려워지는 상황이 발생해왔습니다.
DOM의 유지보수와 개발 용이성을 위해 만들어진 jQuery가 거의 표준으로 자리잡았습니다.
Angular, BackBone에서 좀더 구조화된 프론트엔드 환경인 SPA를 제시하기 시작했습니다. 하지만 여전히 DOM을 사용하며 JS에서 값을 변경하면 DOM의 값을 변경하기 쉽도록 하여 개발을 쉽게 해주었다
Facebook이 생각한 “데이터가 바뀌면 View를 날리고 새로 만들면 되지 않을까?” 를 시작으로 DOM을 다루는 Angular, BackBone과는 다르게 리액트에서는 새로운 개념인 가상돔을 도입했습니다.
리액트 역사
- 2011년: 페이스북의 소프트웨어 개발자 Jordan Walke가 React의 기반이되는 FaxJS 개발
- 2012년: Facebook의 instagram인수
- 2013년: Jordan Walke의 React 최초공개
- 2015년: React의 발전과 확장
리액트 장단점
장점
- Component사용으로 효율적인 재사용 및 유지보수가 용이
- 생태계가 넓고 다양한 라이브러리 사용 가능
- 점진적인 리액트 적용이나 다른 프레임워크에서도 사용가능
- 가상돔을 활용한 빠른 렌더링 가능
- 리액트 네이티브를 활용한 앱개발 가능
단점
- React는 MVC로 비유하면 V(View)의 영역만을 관리한다.
- JS 배경지식을 요구하고 진입장벽이 생각보다 낮지않다
- IE8이하는 지원하지 않는다.
- SPA프로젝트의 규모가 커지면 초기로딩이 길어질 수 있다.
728x90'IT > 리액트' 카테고리의 다른 글
리액트 주요개념 - 이벤트 처리하기 (0) 2022.01.15 리액트 주요개념 - State and Lifecycle (0) 2022.01.15 리액트 주요개념 - Component와 Props (0) 2022.01.15 리액트 주요개념 - 엘리먼트 렌더링 (0) 2022.01.15 리액트 주요개념 - JSX (0) 2022.01.12