[React] 의존성 배열 전달(처음 로드 되었을 때 한 번만 실행)

네, 맞습니다. useEffect의 의존성 배열은 React 컴포넌트의 렌더링 동작과 관련된 문법적인 요소입니다. 의존성 배열의 사용 여부와 내용에 따라 useEffect가 언제 실행될지 결정됩니다.

1. 의존성 배열을 전달하지 않았을 때: useEffect에 의존성 배열을 전달하지 않으면, 컴포넌트가 렌더링될 때마다 useEffect 내부의 코드가 실행됩니다. 즉, 컴포넌트의 상태가 변경될 때마다 useEffect가 호출되어 계속 실행됩니다.

useEffect(() => {
  // 컴포넌트가 렌더링될 때마다 실행됩니다.
}); // 의존성 배열을 전달하지 않음

 

2. 빈 의존성 배열을 전달했을 때 ([]): useEffect에 빈 배열 []을 의존성 배열로 전달하면, useEffect 내부의 코드는 컴포넌트가 처음 마운트될 때(첫 렌더링 시) 단 한 번만 실행됩니다. 그 후에는 컴포넌트 상태가 변경되어도 실행되지 않습니다.

useEffect(() => {
  // 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.
}, []); // 빈 배열을 전달

 

3. 특정 값을 포함한 의존성 배열을 전달했을 때: useEffect의 의존성 배열에 특정 값(상태 변수, 속성 등)을 포함하면, 해당 값이 변경될 때마다 useEffect 내부의 코드가 실행됩니다. 이는 해당 값의 변경을 감지하고 반응해야 할 때 유용합니다.

useEffect(() => {
  // 의존성 배열에 포함된 값이 변경될 때마다 실행됩니다.
}, [dependency]); // 특정 의존성 값을 포함

 

요약하자면, useEffect의 의존성 배열은 React가 언제 useEffect를 실행할지 결정하는 데 사용되며, 이를 통해 컴포넌트의 라이프사이클 및 상태 변경에 따른 사이드 이펙트(side effect)를 효과적으로 관리할 수 있습니다.