[React] useState로 모달 만들기

이번 팀 프로젝트에서 모달 만들기를 맡았는데, 자바스크립트로도 모달 만드는 걸 해보지 않았던 터라 꼭 해보고 싶었다.

• modalOpen은 모달창을 open/close 여부를 결정짓는 true/false 값을 담은 useState
• '자세히보기' 버튼에 onClick으로 setModalOpen이 true가 되면서 모달이 열림

• modalBackground는 모달의 바깥영역을 클릭했을 때 모달이 닫히도록 선언한 ref로, useRef로 관리
• 모달구현은 조건부 렌더링으로, modalOpen state가 true이면 모달이 열림
• 모달 외부를 클릭하면 닫히도록 ModalContainer에 ref를 전달하여, onClick 이벤트가 ref로 지정된 영역(모달 외부)에서 발생하면 modalOpen state를 false로 변경하여 모달을 닫아줌
• 그리고 모달에 'X(닫기)'버튼도 있어 onClick 이벤트를 실행하여 modalOpen state를 false로 변경하여 모달을 닫아줌

모달창을 CSS와 Javascript로도 만들 수 있지만, 이 방법은 DOM 요소에 직접 접근하여 class를 수정함.

리액트에서는 Virtual DOM을 통해 미리 렌더링을 하고, 필요한 부분만 리렌더링함.

(튜터님이 리액트는 '효율충'이라고 하셨다..!!)