TIL no.36 - React Hooks useEffect 의존성 배열 ?!

 

의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수입니다.

의존성 배열의 내용이 변경되었을 경우 부수 효과 함수가 실행됩니다.

의존성 배열을 사용하지 않고 아래와 같은 함수를 실행한다면,

useEffect(() => {
    fetch(API_BOOK)
      .then((res) => res.json())
      .then((res) => setBooks(res.MESSAGE));
  });

페이지가 렌더링 될 때마다 데이터를 불러오기 때문에 매애애우 비효율적입니다.

 

저번에 의존성배열을 지워볼까? 하고 지워봤다가 백엔드분이 뭔가 잘못된거같다고 데이터를 자꾸 불러온다 그래서 얼른 의존성 배열을 다시 적어줬던 기억이 있습니다.. ㅎㅎ 

 

그래서 부수 함수효과에서 API를 호출하는 경우, 의존성 배열에 넣어주면 배열안의 값이 변화할 때만 렌더링되는 것을 확인할 수 있습니다.

useEffect(() => {
    fetch(API_BOOK)
      .then((res) => res.json())
      .then((res) => setBooks(res.MESSAGE));
  }, []);

위와 같이 [] 형태로 보이는 것이 useEffect 의 의존성 배열이며 , [a, b] 처럼 함수안에 실행되는 여러가지 값 중에 선택하여 배열 안에 넣을 수 있습니다.

 

useEffect(() => {
    fetch(`${API_BOOK}/${props.match.params.id}`, {
      headers: {
        Authorization: localStorage.getItem("Authorization"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        setData(res.MESSAGE);
        setIsSaved(res.savebutton);
        window.scrollTo(0, 0);
      });

    fetch(`${API_BOOK}/${props.match.params.id}/comment`, {
      headers: {
        Authorization: localStorage.getItem("Authorization"),
      },
    })
      .then((res) => res.json())
      .then((res) => setComments(res.COMMENT));

    if (comments.length > 3) {
      setMoreBtnColor(true);
    } else {
      setMoreBtnColor(false);
    }
  }, [props.match.params.id, comments.length]);

위와 같이 [] 의존성 배열안의 값이 바뀔 때만 렌더링 됩니다.

 

💥하지만 의존성배열을 자주 사용하면 관리하기 힘들고 비효율적일 수도 있다고 하는데 아직은 와닿지 않지만 .. 

최대한 안쓰는 방향으로 관리해주는 것이 좋다고 합니다.

그래서 useEffect 안에서 if 문을 사용해 특정 조건일 때만 렌더링되게 한다던지 최소한으로 의존성배열을 사용하게 할 수 있습니다.