리액트 컴포넌트의 생명주기

리액트 컴포넌트의 생명주기는 리액트 클래스 컴포넌트 사용법을 배우면 이해가 빠르다.
클래스 컴포넌트를 사용할 때는 컴포넌트를 생성하고 화면에서 사라지게 할 때 마다
일일이 메서드를 호출해야 했기 때문이다.

컴포넌트의 출생

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 초기 설정 등을 수행
  }

  componentDidMount() {
    // 컴포넌트가 마운트된 후에 호출되는 메서드
    // 초기 데이터 로딩, 외부 라이브러리 초기화 등을 수행
  }

  render() {
    // 가상 DOM을 반환하여 React가 이를 실제 DOM으로 변환하고 업데이트
    return (
      <div>
        {/* 컴포넌트의 UI 구성 */}
      </div>
    );
  }
}

export default MyComponent;

Mounting: 컴포넌트가 Dom에 삽입되는것.
1) constructure(): 컴포넌트가 생성될 때 호출되는 메서드
2) render(): UI 생성. 최초 랜더링 시에 실제 돔이 생성된다.
3) 가상 돔을 반환하여 react가 이를 실제 Dom으로 변환하고 업데이트한다.
4) componentDidMount(): 컴포넌트가 마운팅 된 후에 호출되는 메서드.
실제 돔에 접근하여 초기 데이터로딩, Api 호출 등이 이루어 진다.

컴포넌트의 업데이트

Updating:
1) NewProps(), setState(), forceUpdate():
2) render() : 새로운 상태, 새로운 속성에 따라 재랜더링. 두번째 랜더링.
3) 가상돔을 반환하여 react가 실제 Dom으로 변환하고 업데이트
4) componentDidUpdate(): 컴포넌트의 업데이트가 된 이후에 호출되는 메서드

컴포넌트의 사망
componentWillUnmounting(): 컴포넌트가 화면에서 사라지기 전에 호출되는 메서드

effect :
(클래스 컴포넌트의 componentDidMount(), componentDidUpdate(), componentWillUnmounting() 을 대체한다.)
랜더링 중에는 작업이 완료될 수 없는 활동들.
예) API, 비동기 통신등은 랜더링이 끝난 이후에 작업되어야 한다.

useEffect(()=>{},의존성배열) :
첫번째실행1) 처음 랜더링 이후에 실행
두번째실행2) 업데이트로 인한 재랜더링 이후에 실행 (한개라도 있으면 실행)

useEffect(()=>{},[]) :
mount, unmount, 시에 단 한번 씩만 실행

useEffect(()=>{}):
업데이트 될 때 마다 실행

Dom:
웹 브라우저가 html을 화면에 출력하기 위해
문자열을 분석하여 자바스크립트 객체 형태로 구조화 한 것

Bom:
브라우저 객체 모델
예) window: 자바스크립트가 제공하는 전역변수.
모든 전역 변수와 함수는 window 객체의 프로퍼티와 메서드이다.
window.document =>
html 문서기능을 이용할 수 있게 해준다. , 1개씩 가질수 있음.