useRef로 modal 끄기

뱀기·2022년 4월 21일
0

nurihaus

목록 보기
5/11

모달 외부의 back을 누르면 창이 닫히게 만들기

  1. useRef란? : 특정 DOM을 선택할 수 있게끔 해주는 기능을 가진 녀석입니다.
// 바깥 영역을 선언해준뒤
// ref를 사용해준다.
// open close는 boolean 값으로 설정하여 관리
// ex

const backSection = useRef();

return
      <>
        <div ref={backSection} onClick={창닫기}>
          <Modal />
          </div>
      </>

특정 영역을 포커싱 하여 사용할 수 있어서 편리했다. onClick을 back에 넣고 사용하면 페이지 전체가 영역으로 잡혀서 모달 창을 눌러도 꺼졌기 때문에 useRef를 사용하게됐다.

참고 : https://reactjs.org/docs/hooks-reference.html#useref

0개의 댓글