---

Lifecycle

• 컴포넌트는 Lifecycle(생명주기) 라는 개념이 있음.
  1. Mount(초기화; 장작) : 최초에 컴포넌트 객체가 생성 될 때 한번 수행하는 과정.
  2. Update(업데이트) : 마운트 된 이후, props 나 state 가 변경 될 때 실행.
  3. Unmount(소멸) : 마운트가 해제되어 제거 할 때의 과정.
• Lifecycle 중간중간에 간섭(코드 실행 등)을 할 수 있음.
• Class 컴포넌트(16.8 이전)에서는 다양한 Lifecycle Method가 존재함.
  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount
  • shouldComponentUpdate
  • getSnapshotBeforeUpdate
  • componentDidUpdate
  • componentWillUnmount

useEffect

• function 컴포넌트(16.8 이후)를 이용할 때는 Hook으로 구현 가능.
• useEffect 는 HTML 렌더링 이후에 동작.

import React, { useEffect } from 'react';

function test() {
  useEffect(
    () => {
      // 코드1.
      return () => {
        // 코드2.
      };
    },
    [ /* deps; dependence(의존값) */ ]
  );
  return;
}
export default test;

• 코드 1 은 컴포넌트가 마운트될 때 1회 실행 됨.
• 코드 2 는 clean up function 이라고도 하며, 코드 1 실행 전에 한번 실행 됨.
• 또한 컴포넌트가 언마운트시에도 코드 2; clean up function 이 1회 실행 됨.
• [deps; dependence(의존값)] 에는 변수나 state가 들어갈 수 있음.
• deps(의존값)에 있는 값을 관찰하여 변할 때(업데이트) 마다 코드 1 이 실행.

// count 가 변경될 때마다 코드1 실행.
useEffect(() => {
  console.log('Count has changed');
}, [count]);

• deps(의존값)를 비우면 컴포넌트가 DOM에 추가되는 시점(마운트)에 1회 실행하고 영영 실행해주지 않음.

useEffect(() => {
  console.log('Mounted');
}, []);

• 만약 deps(의존값)를 아에 생략하면 => 컴포넌트가 업데이트되어 새로운 결과물을 반환하는 시점(렌더링)에 1회 실행함.

useEffect(() => {
  console.log('Mounted');
});

---