본문 바로가기

Lifecycle

(2)
리액트 성능 최적화 : Virtual DOM 1. Virtual DOM은 무엇인가요? (공식 문서) Virtual DOM (VDOM)은 UI의 "이상" 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다.. 실제 DOM과 Virtual DOM을 동기화하는 과정을 재조정이라고 합니다. Virtual DOM은 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다. Data 조작을 통해 UI를 업데이트하여 돔 조작 코드를 제거하여 생산성을 향상시킵니다. 2. 리액트 컴포넌트의 생명 주기 Re..
useEffect는 라이프사이클 훅이 아니다. Myths about useEffect | Epic React by Kent C. Dodds Myths about useEffect Some common mistakes I see people make with useEffect and how to avoid them. epicreact.dev TLDR : useEffect는 deps의 상태들과 사이드이펙트를 동기화하기 위한 훅이다. 처음에 리액트를 학습하면 클래스 컴포넌트와 라이프사이클에 대해 배운다. 라이프사이클 함수는 보통 내 코드를 다른사람의 코드 안에 끼워넣는 방법이다. 해당 정보를 의식하고 클래스 컴포넌트처럼 코딩하면 아래처럼 된다. function DogInfo({dogId}) { const controllerRef = React.useRef..