⭐프레임워크 vs 라이브러리
프레임워크: 앱을 만들기 위해 필요한 대부분의 것들을 가져온 것
라이브러리: 특정 기능을 모듈화 해온 것
프레임 워크가 라이브러리를 포함하고 있다. 또한 프레임워크는 내 소스코드를 호출하고 소스코드는 라이브러리를 호출하는 식으로 동작한다. 즉, 프레임워크에서 기능마다 필요한 라이브러리를 여러 개를 사용한다.
🌈React는 프레임워크가 아닌 라이브러리
React는 UI를 전적으로 렌더링에 관여한다. 화면을 바꾸는 routing(SPA에서 다른 화면을 보여주는 것) 다른 모듈을 사용한다.
⭐컴포넌트
리엑트로 앱을 만들기 위한 최소 단위
여러 컴포넌트를 모아서 하나의 페이지를 만든다
컴포넌트 예시) instagram
-
검색창
-
스토리
-
게시글
-
댓글 등
🌈React component의 종류
- 클래스형 컴포넌트
- 함수형 컴포넌트 -> 요즘 주로 사용됨
⭐웹 페이지 빌드 과정(CRP)
render engine이 html, css 문서를 읽은 후 parsing 하여 페이지를 렌더링할 것인지 아닌지를 결정한다.
-> DOM 트리를 생성하며(자료구조에서 배우는 트리) 이는 추후에 react로 렌더링을 하는 과정에 중요한 역할을 한다.
- Layout을 한다.
DOM과 CSSOM을 결합하여 content와 style정보를 포함하는 최종 Tree를 생성한다.
- Layout(reflow)
각 요소의 크기와 위치를 계산한다.
- Paint
🪐문제점
하지만 JS를 통한 interaction이 발생하면 page에 변화가 생기고(html문서) 이 때마다 render engine이 위에서 설명한 일련의 과정을 거치게 된다. -> 너무 많은 자원을 소모함, 다시 계산하지 않아도 되는 불필요한 계산을 하게됨
🪐해결점
가상 DOM -> 실제 DOM을 메모리에 복사해놓은 것
만약에 새로운 변화가 생긴다면 이전의 가상 DOM과 이후의 가상 DOM과 비교를 해서 바뀐 부분만 실제 DOM에 적용한다.
-
해당 과정에서 바뀐 부분을 찾는 과정을 Diffing 이라고 한다.
-
바뀐 부분만 실제 DOM에 적용하는 것을 재조정(reconciliation)이라고 한다.
-
효율적으로 interactive한 상황에 대처할 수 있다.
가상 DOM 덕분에 많은 요소가 변경된 경우에는 전체 요소를 한 번에 묶어서 실제 DOM에 적용하면 되기 때문에 실제 DOM을 조작하는 비용을 많이 줄일 수 있다.
⭐Node.js 설치
Node.js란? 크롬 V8 js engine으로 빌드한 자바스크립트 런타임이다. Node.js를 통해 브라우저가 아닌 곳에서도 JS를 이용한 연산이 가능하다.
Node.js는 크롬에 검색해서 설치할 수 있으며 앞으로의 IDE(editor)는 Visual Studio Code를 사용한다.
⭐Webpack
오픈 소스 자바스크립트 모듈 번들러, 여러 개로 나누어진 파일들을 하나의 JS코드로 압축하고 최적화한다.
🪐장점
1.번들링을 함으로써 모듈들 간의 의존성을 확인하고 하나의 번들 파일로 만듬으로써 로딩 속도를 빠르게 만들어준다.
- module 단위로 개발하여 유지보수가 쉽다.
⭐Babel
최신 JS 문법을 지원하지 않는 브라우저들을 위해서 최신 JS문법을 구형 브라우저에서 돌 수 있게 하는 라이브러리
ex) const, let -> var로 변환
⭐React App 설치 방법
-
프로젝트 폴더 생성
-
터미널에서 해당 프로젝트 폴더 위치에서 입력 및 실행
npx create-react-app ./
⭐npx란?
npm 레지스트리라는 npm의 많은 라이브러리가 저장된 곳에서 특정 라이브러리를 사용자가 필요로 할 때 특정 프로젝트 폴더에 가져와주는 역할
- 로컬 서버 만들어서 실행하기
npm run start
