❓ 리액트는 라이브러리 인가 ?
라이브러리는 어떠한 특정 기능을 모듈화
프레임 워크 앱을 만들기 위해 필요한 기능들을 모아놓은것.
-> 프레임 워크는 라이브러리를 포함, 소스코드를 호출.
-> 소스 코드는 기능을 구현하기 위해 라이브러리를 호출.
📍리액트 = 전적으로 UI를 렌더링 하는 아이.
📍화면 바꾸는것 = react-router-dom
📍상태 관리 = redux, mobx, recoil 등의 여러 모듈 사용
📍빌드 = webpack, npm 등
📍테스팅 = Eslint , Mocha 등
📍리액트를 사용하기 위해 여러 "라이브러리" 를 사용.
📍리액트 = "라이브러리"
❓리액트는 왜 가상돔을 사용하는가?
순서
웹 브라우저가 html 문서를 읽음 -> html은 Dom 트리 생성 -> cssDom 트리와 만남 -> 합쳐서 RenderTree 만듬 -> layout 단계 -> Paint 단계 를 거치고 나서 화면에 보여진다.
💥문제점💥
어떤 행동에 의해 DOM 에 변화가 생기면 그때마다 Render Tree 가
재생성 되기 때문에, 성능도 낮아지고, DOM을 조작하는 비용이
너무 크게 된다. 이러한 불필요한 과정을 줄이기 위해
"가상돔(Virtual Dom)" 이 나오게 된다.
❓가상돔(Virtual Dom) 이란?
-> 실제 DOM 을 메모리에 복사해 둔것.
📌가상돔(Virtual Dom) 의 작동?
-> 데이터가 바뀌면 가상돔에 렌더링이 되고 , 원본의 DOM 이랑 가상 DOM을 비교해서 바뀐 부분만 실제 원본의DOM 에 적용 시켜준다.
📍 바뀐 부분을 찾는 과정 = 'Diffing'
📍 바뀐 부분만 실제 돔에 적용 시키는 과정 = '재조정(reconciliation)'
📌Webpack 이란?
-> 오픈소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는
파일들을 하나의 자바스크립트 코드로 압축하고 최적화 하는 "라이브러리"
그럼 장점은?
-> 여러개의 코드를 압축해서 최적화 할수 있기 때문에, 네트워크 비용을
줄일수 있다.
모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉽다.
📌Babel 이란?
-> 최신 자바스트립트 문법을 지원하지 않는 브라우저들을 위해서 최신
자바스크립트 문법을 구형 브라우저에서도 변환 시켜주는 라이브러리.
📌SPA(Single Page Application)
-> 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을
바꿔가며 표현 한다 .
