React에서 useEffect Hook과 클로저의 역할 이해하기

'useEffect' Hook은 사이드 이펙트를 처리하는 데 사용됩니다. 사이드 이펙트란 렌더링 이후에 발생하는네트워크요청, DOM조작, 이벤트 리스너 등록 등의 작업을 말합니다. 'useEffect'는 의존성 배열을 제공함으로써 특정 값의 변화에 따라 'useEffect'가 언제 실행되는지를 조절할 수 있습니다. 이를 통해 필요한 시점에만 사이드 이펙트가 수행되도록 할 수 있습니다. 이러한 이유로 EsLint의 'react-hooks/exhaustive-deps' 룰은 'useEffect' Hook 에서 사용되는 모든 상태를 의존성 배열에 명시하도록 권장하고 있습니다. 그런데 왜 의존성 배열에 상태를 명시해야 할까요? 그 이유는 "클로저 트랩"을 피하기 위함입니다. 'useEffect' 의 콜백 함수는 클로저입니다. 클로저는 자신이 생성될 때의 환경을 '기억'하는 함수를 말합니다. 이 콜백 함수는 생성되는 시점의 상태를 '기억'하므로, 만약 의존성 배열에 상태를 명시하지 않으면, 해당 상태가 변경되더라도 'useEffect'의 콜백 함수는 그 변화를 인지하지 못하고 처음 생성될 때의 값을 계속 참조하게 됩니다. 반면, 의존성 배열에 상태를 추가하면, 해당 상태가 변경될 때마다 'useEffect' 의 콜백 함수가 다시 생성되어 그때의 상태 값을 다시 '기억' 하게 됩니다.이를 통해 항상 최신의 상태 값을 참조하도록 할 수 있습니다. 결론적으로, 'useEffect'의 콜백 함수는 클로저로 구현되어 있으며, 이 클로저의 특성 때문에 의존성 배열에 상태 값을 명시해야 합니다. JavaScript의 특징과 React의 동작 방식에 대해 이해하게 되면 이들을 올바르게 활용하여 코드의 효율성을 향상시키고 예상치 못한 버그를 방지할 수 있습니다.