[02-01] React가 어쩌다가

!

 

DOM "간편" 조작으로 React를 사용한다고 했다. 

거기서 나온 개념들 중 더 찾아본 것을 기록하고자 한다.

---

동작

출처: ASAC 7기 수업자료

- 데이터가 변함에 따라 웹 페이지의 Rerender가 발생

    -> 과거에는 각 상태의 변경에 따라 매번 페이지를 갱신 => 잦은 rerendering ㅠㅠ

    => react에서는 단방향 프로세스로 설명

    ==> Controller(상태 변경 발생) -> Model(State 데이터가 변경) -> View(page를 지목하는 DOM 변경)

 

- 리액트에서는 페이지 구성에서 VDOM 트리를 도입

항목	Virtual DOM(VDOM)
목적	DOM 업데이트를 최소화 -> 성능을 최적
역할	변경된 부분만 감지( Reconcilation) -> 이를 실제 DOM에 반영
비교 대상	1) 타입이 달라졌을 경우 2) 같은 타입일 때는 자식 노드로 내려가서 비교
장점	최소한의 DOM 조작 성능 향상
작동 방식	crrent tree의 변경 부분이 있으면 work-in-program tree에서 변경 내용 반영

 -  fiber 아키텍처로 구성 시, 각 단일 노드를 fiber node

    : 비동기 렌더링, 작업의 우선 순위 부여 가능

- 추가적으로 useMemo와 React.memo를 사용하는데,

	useMemo	React.memo
역할	값을 메모이제이션 -> 불필요한 계산 방지	컴포넌트를 메모이제이션하여 리렌더링 방지
대상	특정 계산 로직(값) 또는 함수	함수형 컴포넌트 전체
사용 시점	리소스가 많이 필요한 계산(비싼 연산)이거나 동일한 값 재사용시	컴포넌트의 props가 변경 되지 않았을 때 => 부모는 자주 바뀌는데, 자식 컴포넌트는 바뀌지 않을 때
의존성 관리	의존성 배열을 직접 지정	기본적으로 props 사용
코드	useMemo(계산or 함수, 의존성 배열)	memo(컴포넌트, 옵션값)

* Memoization: 반환 값을 캐싱

* 의존성 배열 == 다시 실행할 조건들, 안의 요소 변경 시 다시하는 거!

useMemo – React

 

memo – React

 

---

- 찾다가 잘 정리된 것을 발견했다.. 짱..

[React] Fiber 아키텍처의 개념과 Fiber Reconcilation 이해하기

---

Batch

- 리액트에서 사용되는

- 렌더링 최적화를 위해

- 여러 상태에 대한 업데이트를 하나의 Rendering 사이클로 처리하여

- 불필요한 렌더링을 방지하고 상태 업데이트를 최적화

 

 

이전 글: 2024.12.11 - [ASAC/정리용] - [2주차 1차시] 웹 동작-1

다음 글: 2024.12.11 - [분류 전체보기] - [2주차 1차시] 웹 동작-2