인프런 커뮤니티 질문&답변
작성한 질문수
강의 잘 듣고 있습니다.
작성
·
226
0
강의 잘 보고 있습니다. 13:02 부분에
!ref.current를 어떤 상황을 이유로 추가를 하셨는지 궁금해서 질문 드립니다..
modal부분이 없는 경우가 어떤 상황인지 전혀 떠오르지 않습니다 ㅠ
그리고 useOnClickOutside hook에서 useEffect를 안써도 잘 잘동이 하는데 왜 썻는지도 너무 궁금합니다 !
바쁘신데 죄송합니다 답변 기다리겠습니다 ! ㅠ
답변 1
0
John Ahn
지식공유자
안녕하세요
우선 !ref.current 이부분은
useOnClickOutside(ref, () => {
setModalOpen(false);
});
만약 이 부분에 잘못된 ref를 넣었거나, ref를 넣지 않았을 때 에러를 막아주는 방어 코드 역할을 합니다.
또한 useEffect 없이 사용한다는 말은
export default function useOnClickOutside(ref, handler) {
const listener = (event) => {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
handler(event);
};
document.addEventListener("mousedown", listener);
document.addEventListener("touchstart", listener);
return () => {
document.removeEventListener("mousedown", listener);
document.removeEventListener("touchstart", listener);
};
}
이렇게 사용하신다는 건가요? 리액트에서 컴포넌트가 시작할 때 리스너를 등록하고 컴포넌트를 더 이상 안 쓰게 될 때 없애주는 걸 해줘야 하는데 useEffect안에서 올바른 타이밍에 리스너 등록하고 없애줄 수 있습니다.
또한 ref와 handler가 바뀔 때만 새롭게 useEffect안에 함수가 호출되게 해 놓았는데 이 부분도 useEffect가 있어야만 가능합니다. 현재 지금은 만들면서 저희만 로컬에서 테스트하기에 1번 같은 방어 코드의 역할이나 2번 같은 리스너 혹은 의존성의 역할이 큰 거 같지 않아 보이지만 많은 사람들이 사용하게 되면 분명 에러가 발생하게 됩니다 ~
그래서 이러한 부분을 신경 써서 코딩해주는 게 좋습니다 감사합니다 ~
빠르고 구체적인 답변 감사합니다! 정말 많이 배워 갑니다 !