01. React란, 무엇일까?
리액트란 ? 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리.
SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있습니다.
SPA란?
SPA 이전 Multi-Page-Application (MPA) 아키텍처에서는 페이지마다 서버에 해당 페이지의 HTML 파일을 요청하고 이를 브라우저가 응답으로 받아 유저가 볼 수 있도록 그려주는 구조였습니다.
- 만약 기존 MPA에서 유저가 브라우저에서 www.naver.com/으로 들어가면 서버에 해당 페이지를 표현하는 HTML를 요청하고 이를 응답으로 받아 화면에 그려줍니다.
- 이때 유저가 www.naver.com/mypage로 이동하면 브라우저는 다시금 서버에 해당 페이지를 표현하는 또 다른 HTML를 요청하고 이를 유저에게 보내주는 형태였죠.
SPA는 서버에서 HTML 페이지들을 일일이 다운로드하는 것이 아니라, 하나의 마크업(markup) HTML 파일을 받아 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시합니다. 이로 인해 사용자가 페이지를 다시 로딩할 필요도 없어진거죠!
Virtual Dom | 가상돔이란?
DOM이란?
HTML 마크업 구조를 자바스크립트로 조작이 가능한 객체 형태로 모델링한 것. DocumentObjectModel
DOM은 웹 페이지를 저희가 사용하는 자바스크립트와 같은 프로그래밍 언어와 연결해주어 화면에 그려진 UI 요소들을 조작할 수 있게 도와주는 역할을 하는 거죠.
웹 페이지에 그려진 화면(UI)을 조작하기 위해서는 DOM이라는 것을 조작해야 하는데요, 우리가 만약 어떤 DOM 요소를 변경하게 되면 브라우저는 새롭게 변경된 DOM을 토대로 새로운 화면을 그리는 것이지요.
DOM 요소의 변화가 생기면 브라우저는 이 변화를 화면에 새롭게 표현하기 위해 여러 가지 과정을 거치는데요, 이때 가장 큰 연산 비용이 많이 드는 단계는 DOM 요소의 변화 이후 요소들의 위치를 계산하는 레이아웃 단계와 새로운 화면을 다시 그리는 페인트 단계가 있습니다.
JavaScript를 이용해 DOM을 직접 조작하면, 변경 사항이 있을 때마다 레이아웃 단계와 페인트 단계를 초래하게 됩니다. 만약 10개의 DOM 노드를 for 문으로 일일이 수정하게 되면, 하나의 노드에 수정 사항이 생길 때마다 화면을 다시 그리는 과정을 거쳐야 할 수 있습니다. 즉 10개를 한 번에 수정하는 것이 아니라, 하나씩 수정된 노드가 10번에 걸쳐서 다시 화면에 그려질 수 있다는 이야기입니다. 때문에 일반적으로 DOM을 직접 조작하는 것은 비용이 크다고 이야기하죠.
그렇다면 가상DOM은?
한편 가상 DOM은 실제로 렌더링 되지는 않았지만, 실제 DOM 구조를 반영한 상태로 메모리에 있는 가상의 DOM입니다. ❗️여기서 메모리에 있다는 것은 우리가 선언한 let a = 123 과 같이 값으로 메모리라는 저장 공간에 있다는 것이죠.
메모리 상에 있는게 무엇이 중요하냐고요? 😅
- 위에서 언급했듯이 실제 DOM은 조작이 일어나면 이는 바로 브라우저를 통해 위에서 여러가지 랜더링 단계를 거치게 됩니다.
- 그렇지만 메모리상에 그냥 값으로 존재하는 가상 돔은 변경이 일어나도 이것이 브라우저 렌더링과는 직접 적으로 연결되어 있지 않습니다. 즉, 만약 리액트가 가상 돔의 변화를 실제 DOM에 적용하지 않는 한 아무리 많은 조작이 가상 돔에 일어나도 이는 브라우저의 렌더링을 일으키지 않죠.
가상 DOM은 이러한 특징을 바탕으로 위에서 말한 , for문으로 10개의 DOM 요소를 수정하는것과 같은, 변경 사항들을 한 번에 묶어서 실제 DOM에 반영을 합니다 (이를 👉batching이라고 합니다.).
주요 특징
- 컴포넌트 기반
- 선언형 뷰
- JSX
- Hooks
- State & Props
02. React 초기 설정
vscode, nodejs 설치
NPM(Node Package Manager) 설치
npm은 ? 무수히 많은 third-party 패키지들이 모여있는 집합소 입니다. 우리는 npm에서 여러 패키지를 다운받아 활용할 수 있습니다.
우리는 yarn을 사용할 것!
yarn이 터미널에서 설치 안될 때 아래 글 참고
[Mac] 맥에서 Homebrew로 node, npm, yarn 설치하는 방법
더 알아볼 키워드
yarn과 npm의 차이점은?
yarn 명령어는?
vscode에서 prettier 확장프로그램 설치
vscode 설정 열기 들어가서 아래 코드 붙혀넣기하기
"editor.defaultFormatter":"esbenp.prettier-vscode"
