[백승렬] Week 19 #496
[백승렬] Week 19 #496
Conversation
| const FolderPage = () => { | ||
| const router = useRouter(); | ||
| const { folderId } = router.query; | ||
| const currentFolderId = useMemo(() => { |
There was a problem hiding this comment.
여기서 굳이 useMemo를 사용하신 이유가 있으시다면?!
useMemo를 사용하면 값을 메모이제이션할 수 있다는 장점이 있지만 반대로 비용이 많이 들어가는 방법이에요!
잘못됬다는 것은 아닙니다! 다만 알아두면 좋은 내용이에요 :)
남용하지 말아야할 이유
useCallback과 useMemo는 성능 최적화의 목적으로 사용되긴 하지만, 무분별하게 사용할 경우 오히려 성능 저하를 초래할 수 있다.
메모이제이션 자체의 비용: 이 두 Hook을 사용하면 함수와 계산 결과를 캐싱하기 위한 메모리 사용량이 늘어난다. 게다가, 새롭게 계산되는 값이 일정 기간 동안 사용되지 않아도 메모리에 남아 있어야 하므로 메모리 관리의 측면에서 비효율적일 수 있다. (가비지 컬렉터가 무시)
의존성 배열의 관리: useCallback과 useMemo는 의존성 배열이 필요한데, 이 배열에 들어간 값들이 변경될 때마다 메모이제이션 된 값을 무효화하고 새로 계산한다. 이 과정에서 복잡성이 증가하며, 관리가 미흡한 경우 오히려 성능이 저하될 수 있다.
남용에 따른 실수: 무분별한 사용으로 인해 모든 함수나 결과값을 메모이제이션하려 할 때 실수가 발생할 가능성이 높아진다. 이로 인해 성능 최적화를 기대하는 대신 버그나 성능 저하를 초래할 수 있는 상황이 생길 수 있다.
|
|
||
| type Params = { name: string }; | ||
|
|
||
| export const useAddFolder = () => { |
There was a problem hiding this comment.
커스텀훅 별로 파일을 나누는 것도 좋지만 같은 타입의 api 호출이라면 한 파일에 묶어주시는 것도 좋아요
예를 들면,
// useCustomLink.ts
export const useAddLink = () => {}
export const useDeleteLink = () => {}| }, [userId, folderId]); | ||
|
|
||
| const linksData = data?.data?.map(formatLinkRawData).map(mapLinksData) ?? []; | ||
|
|
There was a problem hiding this comment.
data가 null || undefined일 경우 에러 처리까지 해주면 더 좋을 거 같네요! 간단하게 early return이라도 있어도 되구요!
| @@ -98,6 +120,41 @@ export const FolderToolBar = ({ | |||
| copyToClipboard(getShareLink()); | |||
| }, [getShareLink]); | |||
|
|
|||
| const handleRenameFolderClick = useCallback(() => { | |||
There was a problem hiding this comment.
useCallback도 useMemo와 마찬가지에요! 꼭 써야할까 를 한번더 고민하셔야 하는 친구입니다!
(남용하지 말아야 하는 이유는 위에 ..)
| <a | ||
| href="https://www.youtube.com/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" |
기본 요구사항
변경된 api를 활용해 주세요.
모달에 필요한 api 요청을 만들어 기능을 완성해 주세요.
api 요청에 TanStack React Query를 활용해 주세요.
Github에 위클리 미션 PR을 만들어 주세요.
React, Next.js를 사용해 진행합니다.
주요 변경사항
스크린샷
멘토에게