Conversation
|
|
||
| return ( | ||
| <BackGround ref={ref} $isAddLinkVisible={$isAddLinkVisible}> | ||
| {!$isAddLinkVisible ? ( |
There was a problem hiding this comment.
$변수가 styled-component용이 아닌 상태변수였군요..!
jquery스러운 방식이라 실제로 컴포넌트 내부에서는 잘 사용하지 않긴 합니다 :)
|
|
||
| const Menus = ({ changeTitle, changeID, setIsVisible }) => { | ||
| const listsData: any = useGetPromise(getFolderList); | ||
| const lists = listsData?.data ?? []; |
| <a href={url} target="_blank" rel="noreferrer"> | ||
| <Folder onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}> | ||
| <ImageContainer> | ||
| {img_src ? ( |
There was a problem hiding this comment.
위에 img_src를 빈 string값으로 초기화 시켜줬다면 항상 img_src가 true인 상태로 판단될거에요!
즉, 삼항연산자의 의미가 없다는 뜻입니다 ㅜㅜ! 의도한게 아니라면img_src !== '' ? :요렇게 바꿔보시는게 어떨까요?!
| padding="16px 20px" | ||
| fontSize="16px" | ||
| radius="8px" | ||
| onBtnHandle={() => {}} |
There was a problem hiding this comment.
오잉 빈 함수를 보내주고 있네요?! 아직 추가가 안된걸까요??
| } | ||
|
|
||
| export const SharedModal = ({ $isModalVisible, setIsModalVisible }) => { | ||
| const ICONS = [ |
There was a problem hiding this comment.
오 상수화 시켜주는 거 너무 잘했습니다 :)
| padding="10px 20px" | ||
| fontSize="18px" | ||
| radius="8px" | ||
| onBtnHandle={() => {}} |
There was a problem hiding this comment.
호옥시 빈 함수가 의도한거라면 ()=>null 로 보내주는 것이 더 깔끔할 것 같아요!
null을 바로 return할 수 있도록
|
|
||
| export const useGetPromise = (func) => { | ||
| const [values, setValues] = useState([]); | ||
| const HandleLoad = useCallback(async () => { |
There was a problem hiding this comment.
함수명은 보통 카멜 케이스를 사용합니다! 파스칼케이스는 컴포넌트명에 사용되기 때문에 혼동이 올 수 있어요!
| setValues(results); | ||
| }, []); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
handleLoad()가 useEffect()안에서 또 호출되고 있죠!?
handleLoad()에 useCallback으로 넣어주는 대신 useEffect안에서 바로 함수 내용 코드를 작성해보는 것을 추천드릴게요!
| observer2.observe(footerDivRef.current); | ||
| } | ||
|
|
||
| return () => { |
There was a problem hiding this comment.
useEffect에서 observer를 clean up 해줄 때 추천하는 한가지 방식은 아래와 같아요!
return () => {
items.forEach(item => {
observer.unobserve(item)
})
observer.disconnect()
}unobserve()와 disconnect()를 모두 사용해주는 것인데요
unobserve()는 특정 요소에 대한 가시성 변화 주시를 중단하고, disconnect()는 모든 가시성 변화 주시 대상을 해제하는 것이죠
즉, 우리가 disconnect()만 사용한다면 DOM에서 몇 개의 요소는 여전히 옵저버가 걸려있는 상태로 남아있을 수 있어요. 확신할 수 없다는 뜻이죠
반대로 unobserve()만 사용한다면 내가 모든 요소의 옵저버 연결을 끊어줬다고 해도 observer는 여전히 사용될 가능성이 있다는 뜻이기에 메모리에 남아있게 되고 이는 곧 메모리 낭비 + 퍼포먼스에 불필요한 영향을 끼치게 될 수 있어요
그래서 가장 확실하게 옵저버를 clean up 했다고 보장할 수 있는 방법으로 위 코드를 사용한답니다
DOM에서 완벽하게 지워주는 것입니다 :)
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
-타입 지정 시 오류가 나는 부분 몇 개는 any로 지정하였습니다. 이번주내로 수정하겠습니다.