그렇다면 어떻게 useEffect를 사용해야
이 open 속성의 값에 따라서
대화상자가 보여지거나 닫히게 할 수 있을까요?
일단은 먼저 useEffect 없이 시도해볼텐데
이 Modal 컴포넌트 함수에
if 체크를 넣어서
open이 True인지 확인할 수 있기 때문입니다
만약 그렇다면, 대화상자 ref(참조)를 사용해
이렇게 showModal을 호출하면 됩니다
만약 False라면
close를 호출해 닫으면 됩니다
그러나 이 코드를 작동시켜 보기 위해
이것을 저장하고 돌아가서 다시 로딩을 해보면
이 부분이 중요한데, 오류가 발생합니다
close 호출에 실패했다는 오류가 생기는데
우리가 처음에 하려 했던 것이 이것이었고
처음부터 앱 컴포넌트에서 open은 False라고 되어있기 때문에
우리는 정의되지 않은 값을을 대상으로 close 호출을 한 것이 됩니다
여기에서의 문제는
우리가 showModal과 close라는 메소드를
이 컴포넌트 함수의 내부에서
호출하고 있다는 데에 있습니다
그리고 우리는 대화상자 참조를 이용해
이쪽의 dialog와 상호작용을 합니다
그렇지만 이 컴포넌트 함수가 처음으로 실행될 때
이 참조는 아직 설정이 되지 않은 상태일 것입니다
JSX 코드가 실행되기 전이기 때문에
아직 연결이 되지 않은 것입니다
참조와 dialog 요소 간의 연결이
아직 만들어지지 않았기 때문에
이 참조는 애초에 undefined, 즉 정의되지 않은 상태인 것이고
close 호출 또한 실패할 수밖에 없는 것입니다
이러한 시나리오에서는 useEffect를 쓰는 것이 좋은데
이 대화상자 showModal 메소드나 close 메소드와 같은 DOM API와
속성값 또는 상태값이 동기화될 수 있도록
useEffect가 도움을 줄 수 있기 때문입니다
앞서 배웠던 바와 같이, useEffect로 정의한 effect 함수는
컴포넌트 함수에 바로 이어 실행됩니다
컴포넌트 함수보다 먼저, 혹은 함께 실행되는 것이 아니라
그 이후에 실행되기 때문에
참조와 dialog간의 연결은
이 시점에 이미 만들어져 있을 것입니다
여기에 있는 코드 또한
부수 효과 비슷한 것으로 여겨질 수 있는데
그 이유는, 여기 있는 메소드를 호출하는 것이
UI에 영향을 미치는 반면
여기 이 JSX 코드에는 직접적인 영향을 주지 않기 때문입니다
다시 말해, 이 컴포넌트 렌더링 작업과
직접적으로 연관되어 있지 않다는 것입니다
그러므로 지금 useEffect를 사용할 것인데
몇몇 부수 효과의 경우처럼 무한 루프를 방지하기 위해서가 아닌
특정 값을 동기화시키고자 함이며
지금의 경우에는, open 속성을
DOM API 또는 특정 행동과 동기화시키려는 것입니다
이를 위해 useEffect를 호출하고
이것과 의존성 배열에 Effect 함수를 전달하고나면
여기에 있는 코드를 이렇게 useEffect 안으로 옮겨줍니다
이미 여기 이렇게 경고가 뜨는 것을 보실 수 있는데
여기 보여지는 노란색의 구불거리는 선으로 알 수 있습니다
여기에 경고가 나오는 이유는
이 의존성 배열에
Effect 함수가 필요로 하는 의존성을
모두 추가하지 않았기 때문입니다
앱 컴포넌트 함수의 경우
여기 비어있는 배열을 두어도 문제가 되지 않았는데
그것은 여기 이 Effect 코드는
결국 추가적인 의존성이 없었기 때문이고
여기에 있는 코드의 경우에는 의존성이 있기 때문입니다
그렇기 때문에 이러한 Effect 의존성이 무엇인지
이해하는 것이 매우 중요하다고 할 수 있겠습니다