Node + React Basic [5]

💫 Node + React 기초 강의 💫

1. 리액트란?

1. React JS? 페이스북에서 2013에 만든 라이브러리다

2. Components

module과 비슷하게 컴포넌트로 이뤄져 있어서 reusable이 뛰어남

3. Virtual DOM

💡 RealDOM vs VirtualDOM

VirtualDOM은 Real DOM과 같은 propertiese들을 갖고 있으면
그냥 가볍게 Real DOM을 Copy한 거라 보면 된다

(1) RealDOM :
1. 만약 10개의 리스트가 있다.
2. 그중에 한가지의 리스트만 업데이트 됨
3. 전체 리스트를 다시 reload 해야됨
4. Super Expensive한 작업

(2) VirtualDOM
1. 만약 10개의 리스트가 있다.
2. 그중에 한가지의 리스트만 업데이트 됨
3. 그 바뀐 한 가지 아이템만 DOM에서 바꿔준다

💡 how?

1. JSX을 렌더링 한다. 그러면 virtual DOM이 업데이트됨

2.Virtual DOM이 이전 virtual DOM에서 찍어둔 Snapshot과 비교를 해서 바뀐 부분을 찾는다(diffing)

3. 그 바뀐 부분만 Real DOM에서 바꿔준다

2. Create-React-App

1. Babel

최신 자바스크립트 문법을 지원하지 않는 브러우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 둘 수 있게 변환 시켜줌

2. npm vs npx

(1) npm?

• 노드 패키지 매니저
• 라이브러리들을 담고있는 역할
• npm run build로 파일 빌드

(2) npx?

• Disk Space를 낭비하지 않을 수 있다.
• 항상 최신 버전을 사용할 수 있다.

💻 결과