리액트는 프레임워크가 아닌 라이브러리
=> 전적으로 UI를 렌더링하기 때문
렌더링 : 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것
Framework : 어떠한 앱을 만들기 위해 필요한 대부분의 것(라이브러리)을 가지고 있는 것으로 라이브러리를 포함하고 소스코드를 호출한다.
Library : 어떠한 특정 기능을 모듈화 해놓은 것으로, 소스코드는 어떠한 기능을 구현하기 위해서 라이브러리를 호출한다
리액트는 컴포넌트
리액트로 만드러진 앱을 이루는 최소한의 단위
1. 클래스 컴포넌트
- 무조건 render() 메소드로 감싸줘야 된다class App extends Component { render() { return <h1>안녕하세요.</h1>; } }2. 함수형 컴포넌트
function App() { return <h1>안녕하세요.</h1>; }
브라우저가 그려지는 원리 및 가상돔
리액트의 주요 특징 중 하나 → 가상돔 사용
> 가상돔을 사용하는 이유
- 브라우저가 렌더링하는 과정(웹 페이지 빌드 과정)
(1) DOM tree 생성
-렌더 엔진이 문서를 읽어 들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할 지 결정
(2) Render tree 생성
-브라우저가 DOM과 CSSOM을 결합하는 곳, 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리 출력
즉 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함
(3) Layout(reflow)
-브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계
(4) Paint
-실제 화면에 그리기
→ 문제점 발생
-어떤 인터랙션에 의해 DOM에 변화가 발생할때마다 Render Tree 재생성돼서 위 과정 반복
→ 불필요하게 DOM 조작 비용 커짐
→ 가상 돔(Virtual Dom)
-실제 DOM을 메모리에 복사해준 것
가상돔 작동 방식
-데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용
바뀐 부분을 찾는 과정 = Diffing
바뀐 부분만 실제 돔에 적용 = 재조정(Reconciliation)
→ 묶어서 한 번의 실제 돔 수정으로 처리
리액트 설치를 위해 필요한 것들
*Node.js, NPM
-크롬 v8 js 엔진으로 빌드한 js 런타임으로서, 웹 브라우저 환경이 아닌 곳에서도 js를 사용하여 연산 가능
-프로젝트를 개발하는 데 주요 도구들이 사용하기 때문에 필요
*vs code
-소스 코드 에디터
*리액트 앱
폴더 생성 → 터미널 → npx create-react-app<폴더이름>
-웹팩 : 오픈 소스 js 모듈 번들로, 여러 개로 나누어져 있는 파일들을 하나의 js 코드로 압축,
최적화하는 라이브러리
(+) 로딩에 대한 네트워크 비용 감소, 모듈 단위 개발 가능, 가독성과 유지보수 쉬움
-바벨 : 최신 js 문법을 구형 브라우저에서도 돌 수 있게 변환시켜주는 라이브러리
