useEffect :: 함수형 Component의 생명주기 hook

연관 내용
[Class 컴포넌트의 생명주기]

useEffect를 활용하면 특정 시점에 코드가 실행되도록 설정할 수 있다!

useEffect :: 함수형 Component의 생명주기 훅

useEffect가 실행되는 시점

• 렌더 이후에 실행된다.
  

의존성 배열

Dependency Array

• 이 함수가 실행될 지 안 될지를 의존하고 있다.
• []: 배열이 비어있으면 한번 실행되고 끝난다.
• : 배열이 아예 없으면 뭐가 바뀌든 실행된다.
• [변수]: 배열에 변수가 들어있으면 처음에 한번과 해당 변수가 바뀌었을 때 실행된다.

주의사항

1. 추가 렌더링

• useEffect 안에서 setState를 사용을 지양해야 한다.
• 화면이 렌더되고 나서 useEffect가 실행되는데, setState로 인해서 렌더링이 한번 더 일어나게 된다.

  useEffect(() => {
    setCount(10);
  }, []);

2. 무한 루프

• setState가 일어나는 변수를 의존성 배열에 넣으면, 무한루프가 일어난다.
• count가 바뀌면 useEffect가 실행되고, setCount로 인해서 count가 또 바뀌고, useEffect가 또 실행되고 ...

 useEffect(() => {
   setCount((prev) => prev + 1); 
 }, [count]);

사용 방법

1. 처음에 한번만 실행

• 의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝난다.
• 클래스의 componentDidMount

  useEffect(() => {
    console.log("마운트됨!");
  }, []);

2. Mount 될 때 + 수정되면 실행

• 클래스의 componentDidUpdate와 유사
• 처음에도 한번 실행된다! (componentDidUpdate는 수정될 때만 실행된다.)
• 의존성 배열[]이 없으면 무엇이 바뀌든 실행된다.

 useEffect(() => {
    console.log("수정되고 다시 그려짐!");
  });

• 의존성 배열에 state명을 넣어주면, 그 state가 변경될 때만 리렌더해준다.

  useEffect(() => {
    console.log("수정되고 다시 그려짐!");
  }, [count]);

3. 끝날 때 실행

• 클래스의 componentWillUnmount

  useEffect(() => {
    return () => {
      console.log("컴포넌트 사라짐!");
    };
  }, []);

• 1의 didMount와 합쳐서 사용할 수 있다.

  useEffect(() => {
    console.log("마운트됨!");
    inputRef.current?.focus();
    return () => {
      console.log("컴포넌트 사라짐!");
    };
  }, []);