[Feat/#24] 플로팅 버튼 컴포넌트 구현 #46
Conversation
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const footer = document.querySelector('footer'); |
There was a problem hiding this comment.
저도 채현이 코리 받고 배운 건데 스크롤 감지할 때 useRef를 사용해서 요소를 감지해주는 게 좋다고 합니다!
There was a problem hiding this comment.
그 리뷰를 달았던 PR이 아래 PR인데요,
#13
이때는 스크롤 위치를 상태값으로 저장해서 계속 스크롤이 될떄마다 상태를 바꿔주고, 계속 변하는 상태값을 의존성으로 두어서 useEffect를 실행하고 있어서 제가 useRef를 사용하는 것을 추천드렸습니다!!
그런데 이 코드에서는 스크롤 위치를 계속 상태값으로 받고 있지 않고, useEffect가 의존성 배열이 비어있기 때문에 이벤트 리스너도 한번만 등록되기 떄문에 굳이 useRef를 사용하지 않아도 될 것 같습니다!
그리고 추가로 더 말해보자면, 그때는 handleScroll이 외부에서 선언이 되어있어서 계속 생성되는 문제가 발생해서 useCallback을 사용해서 메모이제이션을 해달라고 요청했는데, 이 코드에서는 useEffect 내부에서 선언되어있기 때문에 이벤트 리스너가 재등록되지 않고 함수도 새롭게 생성되지 않아서 이대로 코드를 작성해도 불필요한 렌더링이 발생하지 않습니다!! :)
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const footer = document.querySelector('footer'); |
There was a problem hiding this comment.
그 리뷰를 달았던 PR이 아래 PR인데요,
#13
이때는 스크롤 위치를 상태값으로 저장해서 계속 스크롤이 될떄마다 상태를 바꿔주고, 계속 변하는 상태값을 의존성으로 두어서 useEffect를 실행하고 있어서 제가 useRef를 사용하는 것을 추천드렸습니다!!
그런데 이 코드에서는 스크롤 위치를 계속 상태값으로 받고 있지 않고, useEffect가 의존성 배열이 비어있기 때문에 이벤트 리스너도 한번만 등록되기 떄문에 굳이 useRef를 사용하지 않아도 될 것 같습니다!
그리고 추가로 더 말해보자면, 그때는 handleScroll이 외부에서 선언이 되어있어서 계속 생성되는 문제가 발생해서 useCallback을 사용해서 메모이제이션을 해달라고 요청했는데, 이 코드에서는 useEffect 내부에서 선언되어있기 때문에 이벤트 리스너가 재등록되지 않고 함수도 새롭게 생성되지 않아서 이대로 코드를 작성해도 불필요한 렌더링이 발생하지 않습니다!! :)
| if (footerRect) { | ||
| setIsVisible(footerRect.top >= window.innerHeight); | ||
| } |
There was a problem hiding this comment.
완전 천재같다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
| export const buttonStyle = css` | ||
| position: fixed; | ||
| bottom: 7.5rem; | ||
| left: calc(50% + 12.15rem); | ||
| `; | ||
|
|
||
| export const hiddenButtonStyle = css` | ||
| position: fixed; | ||
| visibility: hidden; | ||
| `; |
There was a problem hiding this comment.
버튼을 위해서 스타일을 2번이나 정의했는데 아래 코드처럼 하나의 css로 정의해서
S.buttonStyle(isVIsible)로 스타일을 적용하는 것은 어떨까요??
+단항 연산자로 숫자값을 주기 싫다면 Number()도 좋고, 삼항 연산자를 사용하는 것도 좋을 것 같습니다!
export const buttonStyle = (isVisible: boolean) => css`
position: fixed;
bottom: 7.5rem;
left: calc(50% + 12.15rem);
opacity: ${+isVisible};
`;| import * as S from './Footer.style'; | ||
| import Spacing from '@components/common/spacing/Spacing'; |
📌 관련 이슈번호
🎟️ PR 유형
어떤 변경 사항이 있나요?
✅ Key Changes
📢 To Reviewers
📸 스크린샷
🔗 참고 자료