라이프 사이클

1. 가상돔

DOM은 트리구조: 부모 - 자식 노드 등 하위의 값을 가진 구조

돔 트리 하나가 수정이 필요하다면 모든 돔을 다 수정해줘야하기때문에 매우 불편하기때문에

가상돔이 등장(페이스북이 사용)

 

2. 처음 진입했을때, 데이터가 변했을때 돔을 그리고 갈아끼우는것 -> 렌더링, 리렌더링

 

라이프 사이클

컴포넌트가 렌더링을 준비하는 순간부터 페이지에서 사라질 때까지

 

과정

생성: const(constructor)생성 - 렌더링 - componentDidMount 호출

업데이트: 리렌더링 - 리액트 돔 업그레이드 - componentDidUpdate(업데이트 됐다는 걸 알려주는 함수 호출)

업데이트는 state나 props나 부모컴포넌트가 변했을 때

(강제 업데이트:  forceUpdate())

제거: componentWillUnmount 

페이지를 이동해서 이 페이지를 나가버렸다면 원래있던 컴포넌트가 화면에서 사라짐 = 제거

 

 

라이프 사이클 함수

라이프 사이클 함수는 클래스형 컴포넌트에서만 사용 가능

컴포넌트가 화면에 나타는것을 마운트(Mount)한다고 표현

didMount()는 마운트가 완료되었다는 뜻

첫번째 렌더링을 마친 후에만 딱 한번 실행 됨

 

꿀팁: cmd누르고 마우스 클릭하면 그 함수로 이동