라이프사이클(함수형&클래스형 컴포넌트), react hooks

두선아 Dusuna·2022년 8월 7일

State and Lifecycle https://ko.reactjs.org/docs/state-and-lifecycle.html

라이프 사이클 Life cycle 🌌

Component의 생명주기(Life cycle)란

Component가 생성, 수정, 제거를 거쳐서 '눈에 보이게 된 순간부터 사라지는 순간'까지의 과정을 말합니다.

컴포넌트가 화면에 나타나는 것을 mount
수정되는 것을 update,
사라지는 것을 unmount라고 합니다.

클래스형 vs 함수형

메소드를 통해 볼 수 있는 생명주기는 다음과 같습니다.

분류	클래스형 컴포넌트 메소드	함수형 컴포넌트 메소드
Mounting	constructor()	함수형 컴포넌트 내부
Mounting	render()	return()
Mounting	ComponenDidMount()	useEffect()
Updating	componentDidUpdate()	useEffect()
UnMounting	componentWillUnmount()	useEffect()

클래스형 컴포넌트에서는 각종 라이프 사이클 메소드를 이용하여 component가 mount 또는 unmount 될 때 추가 작업을 수행할 수 있었지만, 함수형 컴포넌트에서는 불가능 했습니다. 그래서 React 16.8버전에 새로 추가된 기능이 Hook입니다.

Effect Hook https://ko.reactjs.org/docs/hooks-effect.html

Hooks 🧷

Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(Life-cycle features)를 Hook into(연동)할 수 있도록 하는 함수입니다.

useEffect() 🪂

useEffect()를 사용하여 함수형 컴포넌트에서 side effect를 수행할 수 있습니다.
ex) event listener를 구독&해제, 외부 요청

useEffect(()=>{
  /* 수행할 내용 */
}, [ /*의존배열*/ ])

useEffect는 첫번째 랜더링과, 이후의 모든 업데이트에서 수행됩니다.
(또는 의존배열 내의 값이 있을 경우, 그 값이 바뀔 때 수행합니다.)

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

componentDidMount 혹은 componentDidUpdate와 달리 useEffect에서 사용되는 effect는 브라우저가 화면을 업데이트하는 것을 차단하지 않습니다. 이를 통해 애플리케이션의 반응성을 향상합니다. 대부분의 effect는 동기적으로 실행될 필요가 없지만 동기적 실행이 필요한 경우에는 useEffect와 동일한 API를 사용하는 useLayoutEffect라는 Hook이 존재합니다.

Side Effect 🧹

side effect는 정리 Clean-up가 필요한 것과, 필요하지 않은 두 종류가 있습니다.

Clean-up이 필요 없는 Effect
- React가 DOM을 업데이트 한 뒤 추가로 코드를 실행해야 하는 경우
  ex) 네트워크 리퀘스트, DOM 수동 조작, 로깅

외부 데이터에 구독 Subscription 설정

메모리 누수가 발생하지 않도록 Clean-up

useEffect(() => {
	function handleStatusChange(status) {
    	setIsOnline(status.isOnline);
    }
  	ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
	// return 이후 Clean-up / unsubscribe      
  	return function cleanup() {
  	ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
	};
})