Render & Commit

<aside> 🪝 상태 변경 트리거(요청) → 리액트 감지 → 렌더(가상DOM) → (스냅샷 비교, 재조정)변경이 있을 경우 → 커밋(DOM 반영) → 페인팅

</aside>

Render and Commit – React

Untitled

Untitled

왜 두번 시행돼?? ⇒ StrictMode

<aside> 😶 리액트에서의 순수(Purity) : 렌더링 프로세스에 불순(side-effects)한 것이 있지 않은가?

</aside>

순수함의 조건: 동일한 것(args)을 전달받은 함수가 2번 실행되었을때 동일한 결과를 반환해야 함

순수함수는 주어진 처리만 진행함( 렌더링 전 존재한 객체, 변수는 변경하지 않음)

Keeping Components Pure

hooks

: 클래스 사용시 보다 번들된 파일의 크기를 줄여 성능향상을 다소 기대해볼 법 😎

<aside> 🪝 일반함수, class component에서는 사용 ❌ 문 또는 중첩된 함수 안에서 사용 ❌ 오직 custome hook function , functional component에서만 사용 가능⭕️ custome, 컴포넌트 hook 함수 최상위에서만 사용⭕️

</aside>

일반함수와 custome hook 함수의 차이 ? prefix) **use-** 의 여부

useState