Use Effect가 필요한 이유

useEffect가 필요한 이유

 

리액트에서는 상태가 변경되면 컴포넌트가 다시 렌더링 되는데, 컴포넌트가 렌더링 될 때마다 코드가 실행된다.

axios.get 호출도 이때마다 실행된다.

컴포넌트가 다시 렌더링 될때마다 axios.get이 실행되고, set~가 호출되어 상태가 변경되고 다시 렌더링된다.

그럼 이 과정이 반복되면서 무한 렌더링이 발생한다.

 

이때, useEffect를 사용하면 컴포넌트가 처음 렌더링 될때만 코드가 실행되게 할 수 있다.

useEffect(() => {
  axios.get("http://localhost:3000/posts").then((response) => {
    setPosts(response.data);
  });
}, []);

저기 뒤에 빈 배열은 컴포넌트가 처음 마운트 될 때만 실행되게 하고, 이것을 의존성 배열이라고 한다.

 

일단 처음 마운트 될 때(컴포넌트가 처음으로 화면에 나타날 때) useEffect 내부 함수가 실행된다.

그러면 axios.get 요청을 보내 서버로부터 데이터를 가져오고,

데이터를 성공적으로 가져오면 setPosts를 통해 posts 상태를 업데이트 한다.

상태가 업데이트 되면 컴포넌트가 다시 렌더링 되어 새로운 데이터를 화면에 표시한다.

---

컴포넌트 라이프 사이클

 

컴포넌트의 라이프 사이클은 크게 세 가지 주요 단계로 나눌 수 있다.

1. Mount (처음 나타날 때)

2. Update (업데이트 될 때)

3. Unmount (사라질 때)

 

1. 처음 나타날 때는 컴포넌트가 처음으로 화면에 나타나는 시점이다. 

2. 업데이트 될 때는 컴포넌트의 상태나 프롭스가 변경될 때마다 컴포넌트가 다시 렌더링 되는 시점이다.

3. 사라질 때는 컴포넌트가 화면에서 사라지는 시점이다.

---

useEffect의 콜백 함수는 언제 실행되는가?

 

주로 두 가지 경우에 실행된다.

 

1. Mount 직후

2. 의존성 배열이 변경될 때

 

1. 컴포넌트가 처음 화면에 나타난 직후 실행된다.

2. 의존성 배열에 있는 값이 변경될 때 실행된다.

---

클린업 함수란?

 

클린업 함수는 컴포넌트가 더 이상 필요하지 않은 작업을 깨끗하게 정리하는 함수다.

 

클린업 함수가 컴포넌트가 화면에서 사라지거나 업데이트 될 때 불필요한 작업을 정리해서 컴퓨터가 불필요하게 바쁘지 않도록 도와준다. 예로들면 타이머를 멈추거나, 이벤트 리스너를 제거하는 작업 등이다.

 

클린업 함수는 컴포넌트가 업데이트 되기 직전, 컴포넌트가 화면에서 사라지기 직전에 실행된다.

 

useEffect 훅은 두 가지 주요 기능을 제공하는데 1. 사이드 이펙트 실행(컴포넌트가 마운트 될 때, 의존성 배열의 값이 변경될 때 실행할 코드 정의) 2. 클린업 함수 실행 (컴포넌트가 언마운트 되거나, 의존성 배열의 값이 변경되기 직전에 실행할 콛 정의) 등이 있다.

useEffect(() => {
    let count = 0;
    const intervalId = setInterval(() => {
      console.log(count++);  // 1초마다 count를 증가시켜 콘솔에 출력한다
    }, 1000);

    return () => {
      clearInterval(intervalId);  // 컴포넌트가 다시 렌더링되기 직전에 타이머를 멈춘다
    };
  });

intervalId는 타이머의 식별자로 나중에 이 타이머를 멈추기 위해 사용된다.