강의 잘 듣고 있습니다.

Question

강의 잘 보고 있습니다. 13:02 부분에 !ref.current를 어떤 상황을 이유로 추가를 하셨는지 궁금해서 질문 드립니다.. modal부분이 없는 경우가 어떤 상황인지 전혀 떠오르지 않습니다 ㅠ 그리고 useOnClickOutside hook에서 useEffect를 안써도 잘 잘동이 하는데 왜 썻는지도 너무 궁금합니다 ! 바쁘신데 죄송합니다 답변 기다리겠습니다 ! ㅠ

John Ahn · Answer

안녕하세요 우선 !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번 같은 리스너 혹은 의존성의 역할이 큰 거 같지 않아 보이지만 많은 사람들이 사용하게 되면 분명 에러가 발생하게 됩니다 ~ 그래서 이러한 부분을 신경 써서 코딩해주는 게 좋습니다 감사합니다 ~