리액트는 무엇인가?
A JavaScript library for building user interfaces
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
메타가 만든 오픈소스 라이브러리
*라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것.
특정 프로그래밍 언어에서 자주 사용되는 기능들을 잘 모아서 정리해 놓은 모음집
사용자 인터페이스 (User Interface, UI)
사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간 입력과 출력을 제어해 주는 것.
UI 라이브러리
사용자 인터페이스를 만들기 위한 기능 모음집.
- 자바스크립트 UI 라이브러리
- AngularJS, React, Vue.js
*AngularJS와 Vue.js는 Framework, React는 라이브러리
:heavy_exclamation_mark: 프레임워크 vs 라이브러리
"프로그램의 흐름에 대한 제어 권한"
- AngularJS, React, Vue.js
- 프레임워크 : 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있음 (제어 권한 : 프레임워크)
- 라이브러리 : 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태 (제어 권한 : 개발자)
React는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구
:star: 웹사이트의 작동 원리와 흐름을 함께 이해하는 것이 중요!
리액트 장점
1. 빠른 업데이트 & 렌더링 속도
*업데이트 : 사용자가 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것
리엑트에서는 빠른 업데이트를 위해 내부적으로 Virtual DOM이라는 것을 사용. Virtual DOM은 가상의 돔.
DOM은 Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체. 즉, 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇.
크롬 브라우저의 개발자 도구를 열어 콘솔 탭에서 document라고 입력하면 리액트 공식 웹사이트의 정보가 모두 담겨있는 document object 모델이 나옴. 아래 그림 참고...
Virtual DOM
웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 하는 것.
리액트가 Virtual DOM을 사용하는 이유는 빠른 업데이트 때문...
Virtual DOM이 어떻게 업데이트를 빠르게 하는가?
-> 일반적으로 사용자와 상호작용을 하는 웹페이지 같은 경우 화면의 업데이트가 수시로 이루어짐.
DOM은 웹사이트 정보를 모두 담고 있음. -> thus, 화면이 업데이트된다 == DOM이 수정된다.
기존의 화면을 업데이트하려면 DOM을 직접 수정해야 함 but 이는 성능에 큰 영향을 미침 + 비용 많이 듦 cuz 수정할 부분을 DOM의 데이터에서 모두 찾아야 하기 때문.
React : DOM을 직접 수정하는 것이 아니라 업데이트해야 할 최소한의 부분만을 찾아서 업데이트.
2. 컴포넌트 기반의 구조 (Component-Based)
컴포넌트 : 구성요소라는 뜻을 갖고 있는데 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 마치 레고 블록 조립하듯 컴포넌트들을 모아서 개발...
재사용성(reusability)
재사용성 : 객체지향 프로그래밍을 배울 때 등장하는 개념으로 소프트웨어 개발에 있어 굉장히 중요함. 개발할 때 항상 생각해야 함.
재사용성의 장점
- 개발 기간이 단축됨
- 유지 보수가 용이 (버그의 원인 찾기 쉬움.)
- 활발한 지식 공유 & 커뮤니티
리액트 단점
- 방대한 학습량 (계속해서 버전이 업데이트되어 계속 학습해야 함.)
- 높은 상태관리 복잡도 (state는 바뀐 컴포넌트를 의미함.)
*StackOverflow : 개발자들이 많이 찾는 커뮤니티.
React Native를 이용해 모바일 앱을 개발할 수 있다는 점. ()
