Modal

이전에는 바깥 영역에 click 이벤트를 주어서
범용적으로 사용하려면 wrapper 영역을 만들어서
wrapper에 click 이벤트를 걸어야 한다

useRef()

useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

useRef는 DOM에 직접 접근하거나
가변 값을 저장하기 위해 사용된다
값을 저장할 때는 렌더링을 일으키지 않기 때문에
주의해야 한다

import { useState, useEffect, useRef } from 'react'

const modalRef = useRef<HTMLDivElement>(null)
const [isModal, setIsModal] = useState(false)

useEffect(() => {
    const clickOutside = (e: any) => {
      if (isModal && !modalRef.current?.contains(e.target)) {
        setIsModal(false)
      }
    }
    document.addEventListener('mousedown', clickOutside)
    return () => {
      document.removeEventListener('mousedown', clickOutside)
    }
  }, [isModal])

<div className={styles.modal} ref={modalRef}>
	<form>
		<input
        	onChange={inputChange}
        	placeholder='제목'
        	className={styles.modalSubject}
        	type='text'
        	value={subject}
        />
		<button className={styles.modalSubmit} onClick={submitClick} type='submit'>
              작성완료
		</button>
		<textarea onChange={textareaChange} placeholder='내용' className={styles.modalContent} value={content} />
	</form>
</div>