클래스형 컴포넌트 생명주기

componentDidMount

컴포넌트가 처음으로 DOM에 마운트된 직후에 호출됩니다.

componentDidUpdate

컴포넌트가 업데이트된 직후에 호출됩니다.
props나 state가 변경되어 다시 렌더링된 후에 실행됩니다.

componentWillUnmount

컴포넌트가 DOM에서 제거되기 직전에 호출됩니다.

componentDidMount() {
	this.setupConnection();
}

• componentDidMount 메서드에서 this.setupConnection()
  을 호출하는 코드 입니다.
  컴포넌트가 처음 DOM에 마운트된 직후에 setupConnection 메서드를 실행합니다.

componentDidUpdate(prevProps, prevState) {
	if(
		this.props.roomId !== prevProps.roomId ||
		this.state.serverUrl !== prevState.serverUrl
	) {
		this.destroyConnection();
		this.setupConnection();
	}
}

• componentDidUpdate 는 props 나 state 가 변경됐을때
  조건이 맞으면 기존 연결을 종료 후 새 연결을 합니다.

componentWillUnmount() {
	this.destroyConnection();
}

• componentWillUnmount 는 컴포넌트가 언마운트되기 전에 호출
  destroyConnection 을 호출하여 연결을 종료 합니다.

빈 배열

useEffect(callback, []);

dependency 배열이 비어있을 때
useEffect 가 포함된 컴포넌트가 맨 처음 마운트될 때만 callback 함수가 실행됩니다.

Dependency(의존성)

useEffect 훅에서 dependency 는 의존성 배열의 항목을 의미합니다.
의존성 배열에 포함된 값들이 변경될 때마다 useEffect 가 재실행됩니다.

빈 배열이 아닐 때

useEffect(callback, [dependency]);

컴포넌트가 처음 마운트 될 때, 그리고 dependency 에 포함된 state 나 props 등이 달라질때 callback 함수가 실행됩니다.

배열이 아예 없을 때

useEffect(callback);

두 번째 (dependency) 인자가 아예 없는 경우, 컴포넌트가 처음으로 마운트 될 때와 재렌더링 될 때 콜백 함수가 실행됩니다.
하지만 useEffect에서 거의 쓰이지 않는 방법입니다.

마운트

DOM 객체가 (렌더링을 통해) 생성되어 브라우저에 나타나는 시점
클래스 컴포넌트 기준으로, 생성자가 호출된 후 render() 메서드가 호출되면 마운트가 발생합니다
컴포넌트의 생명주기 동안 단 한 번, 처음으로 DOM에 컴포넌트가 추가될 때 수행됩니다

언마운트

DOM에서 컴포넌트가 사라질 때, 그 뒷정리를 담당하는 시점
보통 clearInterval, clearTimemout 등 등록된 작업을 제거하는 함수를 호출하거나, 인스턴스를 제거하는 경우에 사용합니다.

리렌더링

렌더링된 컴포넌트가 상태값 변화를 겪고 다시 렌더링되는 시점
함수 컴포넌트를 다시 호출하고, 이미 마운트된 컴포넌트에 어떤 변화사항을 적용할지 변경점을 가져오는 과정입니다.
가상 돔에 변화가 있었을 때, 컴포넌트 2개를 비교하여 차이를 적용시킬 때의 시점이라고 보면 됩니다.
이 작업 중에 리액트는 리액트만의 알고리즘을 통해 DOM에서 필요한 부분 (변경점) 만을 업데이트하여 실제 DOM 조작을 최소화합니다.