2024.01.25 TIL

 

개인과제 리팩토링

1. 함수이름 컨벤션에 맞게 수정

2. nano id 라이브러리로 아이디값 설정

 

Virtual Dom (가상돔)

리액트의 virtual dom을 사용하면 조작을 빠르게 처리할 수 있다.

• 리액트는 가상돔을 이용해서 실제돔을 변경하는 작업을 효율적으로 수행한다.
• 실제 돔의 구조를 그대로 따온 복사본 형태
• 실제 돔은 아니지만 객체 형태로 메모리에 저장되기 때문에 실제 돔 조작보다 빠르게 조작할 수 있다. (실제 돔 조작보다 메모리상에 올라와있는 js객체를 변경하는 작업이 훨씬 가볍다)

리액트의 DOM조작 과정

1. 리액트는 두가지 버전의 DOM 정보를 가지고 있음.
   1. 화면이 갱신되기 전 구조가 담겨있는 가상 돔 객체(좋아요 누르기 전)
   2. 화면 갱신 후 보여줘야할 돔 객체(좋아요 누르기 후) - state 변경됨
2. diffing
3. state가 변경되면 두 가상돔을 비교해서 변화가 일어난 엘리먼트들을 빠르게 파악(React 자체 알고리즘)
4. 재조정(reconciliation)
5. 파악이 끝나면 변경이 일어난 부분만 DOM에 적용함. 적용 시킬때는 변경사항 모두 모아서 Batch Update로 한 번만 적용

클릭 한번에 5개의 요소가 바뀌어야 한다면?

→ 실제 돔 : 5번의 화면 갱신

→ 가상 돔 : Batch Update로 한번만 갱신