라이프 사이클

가상돔이란?

DOM은 html 단위 하나하나를 객체로 생각하는 모델이다.
EX)"div"라는 객체는 텍스트 노드,자식 노드 등등 ,하위의 어떤값을 가지고 있다.이런 구조를 트리 구조라고 합니다.

DOM트리중 하나가 수정될때마다 모든 DOM을 뒤지고,수정할 걸 찾고,다 수정을 한다면
필요없는 연산이 너무 많이 일어난다. 그래서 등장한게 가상돔이다
가상돔은 메모리상에서 돌아가는 가짜 DOM이다.

가상돔의 동작 방식

기존DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다라는 표현을 쓴다)을 비교해서 정말 바뀐 부분만 갈아준다

라이플 사이클이란?

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

• 컴포넌트는 생성되고 -> 수정되고 -> 사라진다.
• 생성은 처음으로 컴포넌트를 불러오는 단계이다.
• 수정은 사용자의 행동 등으로 데이터가 바뀌거나 ,부모 컴포넌트가 렌더링할 때 업데이트 된다

  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  • 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있다.)

• 제거는 페이지를 이동하거나, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계이다.

라이프 사이클 함수

라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있습니다.
라이플 사이클을 클래스형 보다 함수형 컴포넌트에서 많이 쓰는 이유는 리액트 공식문서에서 함수형을 더권장하기 떄문이다

(리액트 16.8버전부터 등장한 React Hooks으로 라이프 사이클 함수를 대체)

클래스형 컴포넌트

클래스형 컴포넌트의 특징으로 부모 컴포넌트로부터 전달받은 props를 사용하기 위해서는 this를 사용해
this.props.sata로 사용해야한다.

함수형 컴포넌트

함수형 컴포넌트에서는 props를 사용하기 위해서 단순히 props.data로 사용하면 된다