Effect 의존성(dependency)이란
속성이나 상태값으로 이해할 수 있습니다
여기 Effect 함수 안에서 사용된 것들입니다
다르게 말하자면
컴포넌트 함수를
다시 실행하도록 하는 값을 말합니다
속성과 상태에 해당하는 경우인데
어떤 값이든 이를 의존성이라고 합니다
useEffect 안에서 사용된다면 말이죠
참조와 같은 값들 또는
여기 있는 앱 컴포넌트 함수를 보면 있는
브라우저 내에 구축된 객체와 메소드가 있는데
이와 같은 값들은 의존성으로 분류되지 않습니다
그 이유는 useEffect는 컴포넌트 함수가 다시 실행되도록 하는
의존성에 대해서만 적용되기 때문입니다
그 이유는 무엇일까요?
이는 해당 Effect 함수는 컴포넌트 함수가
실행될 때마다 작동해야 하기 때문입니다
만일 해당 함수의 의존성이 변경된다면
이전에 설명했듯이 텅 빈 배열로는
일어나지 않을 일이기 때문입니다
만약 아무 의존성도 추가하지 않는다면
값 또한 변경될 수 없습니다
그러므로 앱 컴포넌트 함수에서
해당 Effect 함수는 한 번만 실행되었습니다
그러나 이제 Modal 컴포넌트 안의
이 Effect 함수에서 open 속성을 사용합니다
그리고 해당 속성 또는 해당 속성으로부터 받게 되는 값은
당연하게도 변경될 수 있습니다
그리고 이 앱에서는 그렇게 작업할 것입니다
기존 값이었던 False가
True로 변경될 것입니다
이는 장소를 삭제하는 시점에 변경됩니다
이제, 그 와중에, 의존성 배열이 빈 상태로는
해당 Effect 함수는 절대 다시는 작동하지 않을 겁니다
결과로서 에러를 없애고 이걸 저장했는데도
여기 있는 이 항목들을 클릭할 수 없고
클릭할 수는 있어도 아무 일도 일어나지 않습니다
즉 Modal 컴포넌트가 열리지 않습니다
그리고 열릴 이유가 없는 것은
Effect 함수가 다시 실행되지 않기 때문입니다
그러므로 showModal을 불러올 수 없는 것입니다
그렇기에, open을 의존성으로 추가해야 하며
그렇게 하면 여기 있는 open 속성과
이 Effect 함수가 다시 작동되도록
작업을 해 보겠습니다
Modal 컴포넌트 함수가 실행될 때마다, 그리고
open 속성의 값이 변경될 때마다 적용됩니다
만일 True였다가 다시 True가 되면 작동하지 않을 것입니다
True였다가 False로 변하면
다시 작동할 것이며 반대 경우도 마찬가지입니다
그러므로, open을 추가한 상태로
해당 코드를 저장하고 새로고침을 하겠습니다
이제 해당 항목들을 클릭한다면
대화상자 창이 다시 열리게 됩니다
닫아도 되고 수락해도 됩니다
모두 잘 작동되는데
useEffect의 도움으로 가능한 일입니다
그리고 이를 이용하여 전보다
Modal 컴포넌트가 좀더 간결해졌습니다