개념

---

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

2013년도 페북에서 만듦

컴포넌트로 이뤄져 있어 재사용성이 뛰어남

real DOM과 virtual DOM

---

real DOM: 브라우저에 기본적으로 내장되어있는 API. HTML 태그(노드)가 트리 형태로 구성되어 있으며, DOM을 통해 이 트리에 접근해 HTML 문서(Document)를 조작할 수 있다. 속성 업데이트와 같은 작업은 쉽게 이루어질 수 있지만, 노드의 추가와 삭제 작업은 할때마다 트리를 재정렬 해야하며, 작업의 비용이 많이 소모된다. ex) "좋아요"를 한번 눌렀다고, 창 자체가 새로고침 되는 경우

virtual DOM: DOM의 비효율성을 해결하기 위해 등장. real DOM에 대한 snap shot을 찍어놓고, 이를 현재와 비교하여 업데이트가 발생하면 업데이트가 된 부분만 real DOM에서 바꿔줌(빠르게 업데이트 된 부분만 업데이트 할 수 있음)

설치

---

client 폴더 생성 cd client 명령어로 해당 폴더로 이동

npx create-react-app .을 통해 리액트 설치(.의 의미: 해당 폴더에 설치)

NPM과 NPX

---

NPM(Node Package Manager)

• 저장소(레지스트리) (-g 옵션을 주면, globally 컴퓨터의 /bin 디렉터리에 다운 받아짐. 주지 않으면 로컬에 다운 받아짐)
• 어플리케이션 빌드 및 배포
• package.json에 정의 되어있음

NPX

• 원래는 npm install -g create-react-app을 사용해 디스크 자체에 다운을 받았었음
• 이제는 NPX를 통해 npm registry에서 create-react-app을 찾아 다운로드 없이 실행
• 디스크 공간 절약
• 항상 최신 버전 사용

참고

www.inflearn.com/course/따라하며-배우는-노드-리액트-기본