-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat : Portal, Popup창 구현 #10
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
전역적으로 사용할 수 있는 재사용성 높은 모달컴포넌트 인 것 같습니다..! 구현 방식 참고하여 Bottom Sheet도 구현해보겠습니다..!
@@ -15,6 +15,7 @@ | |||
"@types/react-dom": "18.2.7", | |||
"eslint": "^8.46.0", | |||
"eslint-config-next": "^13.4.12", | |||
"framer-motion": "^10.15.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
라이브러리를 사용하셨군요..! Bottom Sheet 구현시에도 필요하다면 사용해보겠습니답
document.addEventListener('mousedown', listener); | ||
document.addEventListener('touchstart', listener); | ||
|
||
return () => { | ||
document.removeEventListener('mousedown', listener); | ||
document.removeEventListener('touchstart', listener); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
return 문 밖에 있는 코드와 안에 있는 코드 사이의 차이가 있을까요 ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useEffect의 첫 번째인자인 콜백함수의 내부함수는 mount될 때 실행됩니다. 그리고, return문의 함수는 unmount될 때 실행됩니다.
그래서, 위 코드에서는 컴포넌트가 mount되었을 때 이벤트가 추가되고, unmount될 때 이벤트가 제거 되며 이벤트를 cleanup
해줍니다.
💡 왜 PR을 올렸나요?
💁 무엇이 어떻게 바뀌나요?
💬 리뷰어분들께
자유롭게 해주세용 ~