React 함수형 컴포넌트에서 왜 console.log(“ok”)이 여러 번 실행되나요?
React 함수형 컴포넌트를 사용하고 useEffect와 같은 훅을 사용할 때 특정 동작이 발생하는 이유를 이해하는 것이 중요합니다. 이 경우 “console.log(“ok”)” 문이 여러 번 실행되어 개발자들에게 혼란을 주는데, 이 동작의 이유에 대해 자세히 알아보겠습니다.
React에서 useEffect의 역할
React에서 useEffect 훅은 함수형 컴포넌트에서 부수 효과(side effect)를 수행할 수 있게 해줍니다. 이러한 부수 효과에는 데이터 가져오기, 구독(subscription) 또는 수동으로 DOM 변경 및 읽기 등이 포함될 수 있습니다. useEffect는 기본적으로 모든 렌더링 외에도 다시 렌더링 후에도 실행됩니다.
// useEffect 훅 사용 예시
useEffect(() => {
// 여기에서 동작 수행
}, []);위의 예시에서 useEffect 훅은 의존성 배열([])이 비어 있으므로 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다. 이를 통해 useEffect 내의 코드가 의존성이 변경되지 않는 한 다시 트리거되지 않음을 보장합니다.
콘솔 출력 결과 이해하기
이제 질문에서 제공된 콘솔 출력을 분석해봅시다:
5번 실행되는 것이 아니라 다음과 같이 5번 실행됩니다:
code: multiple
code: useEffect
code: setMovies
code: setHeroImage
code: setCurrentPage
code: setTotalPages
useEffect는 의존성이 []이므로 첫 번째 렌더링 시에만 실행됩니다.
그런 다음 상태를 4번 변경하므로 다시 렌더링이 발생합니다.
이는 DOM이 5번 변경된다는 의미가 아닙니다.
code: useEffect
code: []
콘솔 출력 결과를 기반으로 보면, “console.log(“ok”)” 문이 실제로 여러 번 실행되는 것이 아닙니다. 이 문은 한 번만 실행되지만 콘솔 출력은 렌더링 및 다시 렌더링 프로세스 중에 이벤트 순서를 보여줍니다.
첫 번째 렌더링 시에는 useEffect 훅이 트리거되고 “console.log(“ok”)” 문을 실행합니다. 그러나 이후에는 상태 변경으로 인해 다시 렌더링이 발생합니다. 이 경우 상태 변경이 네 번 발생하므로 네 번의 다시 렌더링이 일어납니다.
불필요한 다시 렌더링 방지하기
불필요한 다시 렌더링을 방지하려면 useEffect 훅의 의존성(dependencies)을 수정할 수 있습니다. 다시 렌더링을 유발하는 특정 상태 변수를 포함하여 의존성을 지정함으로써 해당 변수가 변경될 때에만 효과가 트리거되도록 할 수 있습니다.
// useEffect와 의존성 사용 예시
useEffect(() => {
// 여기에서 동작 수행
}, [의존성1, 의존성2]);위의 예시에서 useEffect 훅은 의존성1 또는 의존성2가 변경될 때에만 실행됩니다. 이는 특정 코드가 언제 실행될지를 제어하고 불필요한 다시 렌더링을 피하는 데 도움이 될 수 있습니다.
결론
React 함수형 컴포넌트에서 “console.log(“ok”)” 문은 실제로 여러 번 실행되는 것이 아니라 렌더링 및 다시 렌더링 프로세스의 이벤트 순서를 보여주는 것입니다. useEffect의 동작 방식을 이해하고 의존성을 올바르게 관리함으로써 React 컴포넌트를 최적화하고 불필요한 다시 렌더링을 방지할 수 있습니다.
