#10. React (리액트) 란?

 

Whatr is React.js ? 👋🏻

1. Library. Made by Facebook. 

Released in 2013

1. Components

module과 비슷하게 컴포넌트로 이루어져 있어서 재사용이 가능하다.

2. Virtual Dom

Real DOM vs Virtual DOM

 

- Real DOM?

1. 만약 10개의 리스트가 있다.

2. 그 중에 한가지의 리스트만 Upload 됨.

3. 전체 리스트를 다시 Reload 해야 됨

4. Super Expensive한 작업 ! 

 

- Virtual DOM? ✔️

1. 만약 10개의 리스트가 있다

2. 그 중에 한가지의 리스트만 Update 됨

3. 바뀐 한 가지 아이템만 DOM에서 바꿔준다.

 

 

어떻게 Virtual DOM에서 바꿔주지? 👀

1. JSX를 랜더링 한다. 그러면 Virtual Dom이 Update가 됨

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

3. Virtual DOM이 이전 virtual DOM에서 찍어둔 Shanpshot과 비교를 해서 바뀐 부분을 찾는다. 이 과정을 'diffing'이라고 부름

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