<aside> 💡 바뀐 부분만 실제 돔에 재조정시킨다.

</aside>

배치 업데이트를 통해 가상돔의 최적화를 해줄 수 있다.

리스트 하나만 변경하려고 해도 전체가 변경이 된다.

key라는 속성을 통해서 전체가 아닌 하나만 변경해줄 수 있다.

렌더링 과정

1. 리액트의 가상돔은 실제 dom과 같은 내용을 담고 있으며 자바 스크립트의 객체 형태로 메모리에 저장되어 있는 복사본이다.
2. diffing을 통해서 변경된 부분들을 파악한 후 , 리액트는 batch update를 통해서 실제 dom에 한번에 적용시켜주는데, 이것을 재조명이라고 부른다.
3. 리액트는 렌더링 이전에 내용을 담고 있는 가상돔과 변경 이후에 보일 내용을 담고 있는 가상돔을 가지고 있다.
4. 변경이 되기 전 가상돔과 변경이 된 후의 가상돔을 비교하는 과정을 diffing 이라고 부른다.

<aside> 💡 자바 스크립트가 계속 최신화된 문법을 내고 있지만, 구형 브라우저에서는 그런 문법들을 실행하지 못한다. 그러면 개발하는데 제한이 생기게 되는데 이때 babel을 이용하여 구형 브라우저에서도 돌 수 있게 변환시켜준다.

</aside>

<p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
 
에서 reload 뒷부분 수정하면(app.js) 웹팩이 변경이 된다!

자바스크립트도 템플릿을 라이브서버로 보내줬는데, 리액트도 마찬가지이다.

public 폴더 안에 index.html 템플릿이 존재한다.

자바스크립트의 시작점은 src 폴더안의 index.js 이다.

index.js를 이용해서 템플릿에 있는 것을 꾸며준다.

주로 소스코드를 작성할 때, src 폴더안에 있는 파일들을 변경한다.

<aside> 💡 파일을 뭉쳐준것을 최적화해주는 것이 웹팩이다. 웹팩은 src 폴더안에 있는 내용들만 최적화를 해준다. 그래서 my-app 폴더 안에 있는 파일은 변경이 일어나지 않는다.

</aside>