저번 시간에는 useEffect가 필요하거나 필요치 않은
상황에서의 부수 효과를 다루어 보았습니다
이번에는 useEffect를 좀 더 살펴보면서
특히 이 dependencies(의존성) 배열에 대해 알아보겠습니다
그것을 위해 Modal 컴포넌트로 넘어가겠습니다
Modal 컴포넌트를 열기 위해서는
컴포넌트 밖에서 open을 호출해야만 하도록
해주는 코드가 있습니다
특히나 앱 컴포넌트의 경우
현재로서는 모달을 열기 위해서
이와 연결된 ref(참조)에서 open을 호출하거나
모달을 닫기 위해 close를 호출해야 합니다
이 코드는 문제없이 작동하고 있습니다만
이 모달을 다른 방식으로 구축해서
useEffect가 필요한 상황을 만들어 보겠습니다
그렇게 하기 위해 여기에 있는 forwardRef를 삭제해 주고
여기 import에서도 지워준 다음
그리고
여기 닫는 괄호를 삭제하고
더이상 데이터를 받지 않는
참조 매개변수와
이 세미콜론도 지워주겠습니다
그리고 useImperativeHangle도 이렇게 삭제하고
import 에서도 마찬가지로 지워주겠습니다
이제 이 방식에 적용시킬 대안을 알아보겠습니다
이 Modal 컴포넌트는 속성을 받는데
이 속성의 이름을 open 이라고 하겠습니다
이름은 여러분이 정하시면 됩니다
알고보니 dialog(대화상자) 요소에도
open 속성이 빌트인 되어 있는데
open이 True 혹은 False라고 가정하고
이것을 우리 쪽의 open 속성에 설정하겠습니다
그것이 대화상자 요소의 open 속성에
필요한 것이기 때문입니다
이렇게 변경을 해 주었으면 이제 다시 앱 컴포넌트로 돌아가서
모달 참조의 도움을 받아
모달을 열고 닫는 대신
이 참조를 삭제해주고
그 대신, 추가로 상태를 넣어서 관리함으로
모달의 열림과 닫힘을 제어하도록 하겠습니다
처음에는 모달이 닫혀있도록 False로 해두고
여기에 isOpen 이라고 입력하고
이어서 setIsOpen을 써넣고
보다 명확히 하기 위해 modalIsOpen과 setModalIsOpen으로 바꾸어서
정확히 무엇이 열려있는지를 명시하겠습니다
이제 open을 호출했던 위치 모두에서
이것을 setModalIsOpen으로 바꿔서 호출해주고 True로 설정해 주겠습니다
close를 호출했던 위치들에서는
setModalIsOpen을 호출하고 False로 설정하겠습니다
여기 아래쪽도
마찬가지입니다
이제 modalIsOpen 상태를 사용할 수 있으니
여기 있는 open 속성에 modalIsOpen을 값으로 전달하겠습니다
그리고 여기 있는 속성은 지워주는데
이 모달 속성은 더이상 존재하지 않기 때문입니다
이제 이것을 저장하면, 제가 아이템을 클릭했을 때
모달 창이 이렇게 열리기는 하지만
배경, 즉 backdrop(백드롭)이 없는 것을 보실 수 있습니다
백드롭이란, 모달 뒤 페이지를 회색으로 만들어주어
사용자와 페이지 내의 다른 요소들의
상호 작용을 막는 역할을 하는 기능인데, 이것이 지금은 없습니다
백드롭이 없는 이유는
그것이 대화상자 요소로만 추가할 수 있기 때문이고
dialog의 showModal 메소드를 호출하면 이 기능이 열립니다
이렇게 해당 메소드를 호출해야만 백드롭이 추가된다는 것입니다
지금 하고 있는 것처럼 이 open 속성을
대화상자로 전달하는 것은 사실 별 효과가 없지만
다시 useEffect를 사용함으로
이 속성 중심의 작업 방식을 이어가 보겠습니다