[React] useEffect 의존성 배열이란? 사용 방법과 예제

의존성 배열이란?

useEffect hook에 입력하는 두 번째 매개변수를 말한다.

 

사용 방법

1. useEffect(() => {})

 

컴포넌트가 렌더링 될 때마다 호출된다. 매우 비효율적이기 때문에 이 방식으로는 거의 사용되지 않는다.

 

 

 

2. useEffect(() => {}, [])

 

첫 번째 렌더링 후에만 호출된다.

 

사용 예제

API 호출을 첫 번째 렌더링 후에만 호출할 경우

 

// API 호출
useEffect(() => {
    fetch(movies)
      .then((res) => res.json())
      .then((data) => setMovies(data.List));
}, [])

 

 

 

3. useEffect(() => {}, [value])

 

첫 번째 렌더링 후에 호출된다. 이후에는 value가 변경될 때마다 호출된다. value는 렌더링과 관련된 값이어야 한다. 값이 변해도 렌더링 되지 않는 값이라면 의존성 배열에 있어도 함수가 다시 호출되지 않는다.

 

사용 예제

사용자가 검색어를 입력할 때마다 API를 요청해야 하는 경우

 

 

// 검색어 입력 시 API 호출
useEffect(() => {
    axios.get(`https://movieApi/query=${query}`, 
      ...
    )
    .then((res)=> {
      ...
    })
}, [query])