useEffect란

useEffect란 함수형 컴포넌트에서도 생명주기 메서드를 사용할 수 있게 해준다. 컴포넌트가 렌더링 될 때마다 실행되는 함수, 컴포넌트가 언마운트 될 때 실행되는 함수 등을 정의 할 수 있다.

생명주기 메서드

훅 이야기가 나오면 생명주기라는 단어가 꼭 등장하는데 이참에 자세히 알아보자

1. Mounting (생성)
   • constructor() : 클래스 컴포넌트가 처음 생성될 때 실행되는 메서드이다.
   • static getDerivedStateFromProps() : props로 전달된 값을 state에 동기화시키기 위해 호출되는 메서드이다.
   • render() : UI를 렌더링하는 메서드이다.
   • componentDidMount() : 컴포넌트가 마운트 된 후에 호출되는 메서드이다.
2. Updating (업데이트)
   • static getDerivedStateFromProps() : props가 변경될 때마다 호출되는 메서드이다.
   • shouldComponentUpdate() : 컴포넌트가 업데이트를 해야 할 지 여부를 결정하는 메서드이다.
   • render() : UI를 렌더링하는 메서드이다.
   • getSnapshotBeforeUpdate() : DOM에 변경 사항이 발생하기 전에 호출되는 메서드이다.
   • componentDidUpdate() : 컴포넌트가 업데이트된 후(렌더링 된 후)에 호출되는 메서드이다.
3. Unmounting (삭제)
   • componentWillUnmount() : 컴포넌트가 삭제되기 전에 호출되는 메서드이다.
4. Error Handling (에러처리)
   • static getDerivedStateFromError() : 자식 컴포넌트에서 에러가 발생했을 때 호출되는 메서드이다.
   • componentDidCatch() : 자식 컴포넌트에서 에러가 발생했을 때 호출되는 메서드이다.

예시

componentDidMount

• 컴포넌트가 마운트 된 후에 호출되는 메서드 (빈 배열이여야만 한다.)

useEffect(() => {
  // 컴포넌트가 마운트될 때 실행되는 코드
}, []);

componentDidUpdate

• 컴포넌트가 업데이트된 후에 호출되는 메서드

useEffect(() => {
  // 상태(state)나 프롭스(props)가 변경될 때 실행되는 코드
}, [state, props]);

componentWillUnmount

• 컴포넌트가 삭제되기 전에 호출되는 메서드

useEffect(() => {
  return () => {
    // 컴포넌트가 언마운트될 때 실행되는 코드
  };
}, []);

렌더링과 마운트

여기서 계속 언급되는 렌더링과 마운트 두개의 차이점은 뭘까? 얼핏보면 비슷한 말인것 같다는 생각이 들었다.

렌더링
컴포넌트의 상태(State)가 변경될 때, 그리고 props가 변경될 때 발생한다. 즉, 컴포넌트의 UI가 변경되고 화면에 렌더링된다.

마운트
React 요소가 브라우저 상에 실제 DOM 노드로 추가될 때 발생한다. 즉, 컴포넌트가 처음 생성될 때 한 번 발생한다.

정리를 해보자면 마운트는 컴포넌트의 초기 생성과 관련이 있으며, 렌더링은 컴포넌트의 상태나 속성 등이 변경될 때 발생한다.

비동기와 동기

useEffect는 기본적으로 비동기로 실행된다. 따라서 순서가 중요한 작업에는 순서가 보장되지 않는다. 이를 해결하기 위해서는 useEffect 내부에서 async/await를 사용하거나, Promise.all 등을 사용하여 작업을 조정 할 수 있다.

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos');
      const data = await response.json();
      setData(data);
    }

    fetchData();
  }, []);

  useEffect(() => {
    console.log('Data:', data);
  }, [data]);

  return <div>My Component</div>;
}

export default MyComponent;