1. LifeCycle
ⅰ. 생명주기(LifeCycle) 소개
- 리액트 생명주기란?
- 리액트 컴포넌트는 각각 [Mount] -> [Update] -> [Unmount]의 과정을 거침
- 리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보면 됨
- 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 있음
- 생명주기
생명주기
- 생성될때(mount)
- 업데이트 할때(update)
- 업데이트를 할 때는 리렌더링을 같이 고민해야함
- 제거될때(un-mount)
ⅱ. Mount
constructor()
getDerivedStateFromProps(nextProps, prevState)
render()
componentDidMount()
- 각 메서드 소개
- construcctor
- 컴포넌트가 맨 처음 만들어 질 때 호출
- 생성자
- getDerivedStateFromProps
- 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드
- 마운트 될 때, 업데이트(리렌더링) 될 때도 호출
- render
- 최초 mount가 준비완료 되면 호출되는, 즉 렌더링 하는 메서드
- 컴포넌트를 DOM에 마운트하기 위해 사용
- componentDidMount
- 컴포넌트가 브라우저에 표시가 된 후 호출되는 메서드
ⅲ. Update
- 개요
- 컴포넌트가 갱신될 때를 말함. 리렌더링 되는 경우
getDerivedStateFromProps(nextProps, prevState)
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
- 각 메서드 소개
- getDerivedStateFromProps
- Mount 과정에서도 동일하게 호출되었던 메서드
- 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드
- shouldComponentUpdate
- 리렌더링 여부 판단(함수 호출 결과: true / false)
- true인 경우 : 리렌더링 진행
- false인 경우 : 리렌더링 하지 않음
- 함수형 컴포넌트에서 memo, useMemo, useCallback이 역할을 대신함
- render
- 변경사항 반영이 다 됭 준비완료 되면 호출되는, 즉 렌더링 하는 메서드
- 컴포넌트를 DOM에 마운트하기 위해 사용
- getSnapshotBeforeUpdate
- 컴포넌트에서 변화가 일어나기 직전 DOM의 상태를 저장
- componentDidUpdate 함수에서 사용하기 위한 스냅샷 형태의 데이터
- 스냅샷 형태의 데이터란 특정한 시점에서의 복사본이라고 생각하면 됨
- componentDidUpdate
ⅳ. Unmount
componentWillUnmount
- 각 메서드 소개
- componentWillUnmount
- 컴포넌트가 사라지기 전 호출되는 메서드
- useEffect의 return과 동일
2. DOM과 Virtual DOM
ⅰ. 가상돔 소개
- 리택트(Reat.js)나 뷰(Vue,js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려줌
- 자체적으로 효율적인 알고리즘을 사용해서 그려주기 때문에 속도가 빠름
ⅱ. DOM(Document Object Model)이란?
- 브라우저를 보면 수 많은 컴포넌트로 구성된 웹페이지를 보게 됨.
- 그 페이지를 문서(document)라고 하고 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 함
- DOM은 이 엘리먼트를 tree 형태(=DOM TREE)러 표현한것
- 트리의 요소 하나를 노드랃고 부르고 각각의 노드는 해당 노드에 접근과 제어(DOM조작)를 할 수 있는 API를 제공함
ⅲ.DOM 사용 예시
ⅳ. 가상DOM(Virtual DOM)이란?
- 리액트는 가상 DOM을 이용해서 실제 DOM을 변경하는 작업을 상당히 효율적으로 수행함
- 가상 DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태라고 보면됨
- 실제 DOM은 아니지만 객체(object)형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 후러씬 더 빠르게 조작을 수행할 수 있음
- 실제 DOM을 조작하는 것보다, 메모라상에 올라와있는 javascript 객체를 변경하는 작업이 훨씬 더 가벼운
ⅳ. DOM 조작 과정
- 인스타그램의 좋아요 버튼을 누르면 화면이 바뀌어야 함
=> 빨간 하트에 해당되는 엘리먼트 DOM 요소가 갱신돼야 함 -> DOM을 조작해야 한다는 의미
- 1번째 과정
- 이 과정에서 리액트는 2가지 버전의 가상 DOM을 가지고 있음
- 화면이 갱신되기 전 구조가 담겨있넌 가상 DOM 객체
- 화면 갱신 후 보여야 할 가상 DOM 객체
- 리액트는 state가 변경돼야만 리렌더링이 됨. -> 화면 갱신 후 보여야 할 가상DOM을 만들어야함
- 2번째 과정 - diffing
- state가 변경되면 2번에서 생성된 가상돔과 1번에서 이미 갖고있었던 가상돔을 비교해서 어느 부분(엘리먼트)에서 변화가 일어났는지 빠르게 파악함
- 3번째 과정 - 재조정(reconciliation)
- 파악이 다 끝나면 변경이 일어난 그 부분만 실제 DOM에 적용시킴
- 적용시킬때는 한건씩 적용이 아니라 변경사항을 모두 모아 한번만 적용시킴(Batch Update)
ⅴ. Batch Update
- 변경된 모든 엘리먼트를 한꺼번에 반영할 수 있는 방법
- 클릭 한 번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면 실제 DOM은 5번의 화면 갱신 필요하고 가상 DOM은 Batcj update로 인해 단 한번만 갱신 필요