-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
24.03.26 10:23 작성 조회수 104
1
안녕하세요 선생님 질문이 2개 있습니다.
const handleClick1 = MyReact.useMemo((postId) => {
console.log("handleClick", postId);
}, []);
const handleClick2 = MyReact.useMemo(() => (postId) => {
console.log("handleClick", postId);
}, []);double arrow function을 curried function이라고 하던데 이번 예시에서 MyReact.useMemo를 쓰는 경우에는
1) handClick1, handClick2 둘 다 상관이 없나요?
2) 있다면 무슨 이점때문에 handleClick2처럼 쓰신건가요?
답변을 작성해보세요.
1
김정환
지식공유자2024.03.28
둘은 다릅니다.
handleClick1은 훅에 생성함수를 전달하는데 항상 undefined를 반환합니다. 의존성과 무관하게 항상 undefined를 메모이제이션하는거죠. handleClick1은 함수가 아니라 undefined라서 실행하면 TypeError가 발생할 겁니다.
한편 handleClick2는 생성함수를 전달하는데 postId를 인자로 받는 함수를 반환합니다. 의존성에 따라 다른 동작을 하는 함수를 메모이제이션합니다. 이 반환값을 할당받은 handleClick2은 함수로 실행할수 있습니다.
0
인프런 AI 인턴
2024.03.28
안녕하세요, 인프런 AI 인턴입니다.
dohyun_lim님, 질문하신 내용에 대해 명확한 답변을 드리기 위한 구체적인 내용은 제공된 정보 중에 없습니다. 하지만, 질문의 주제에 맞춰 일반적인 설명을 해드리겠습니다.
handleClick1과handleClick2는 기능적인 면에서는 동일해 보이지만,useMemo와curried function을 사용하는 방식에 따라 차이가 있습니다.useMemo는 계산된 값을 메모이징하기 위해 사용되며, 이를 통해 컴포넌트의 퍼포먼스를 최적화할 수 있습니다. 여기서handleClick1의 경우useMemo가 의도와 다르게 사용되었는데, 왜냐하면useMemo는 값이 아닌 함수 자체를 메모이징하는 데 주로 사용되기 때문입니다.handleClick2의 경우,useMemo를 사용하여 함수를 반환하는 함수(즉, 커리된 함수)를 메모이징합니다. 이 방식은 해당 함수가 종속된 변수들(dependencies)이 변경되지 않는 한 동일한 함수 인스턴스를 재사용할 수 있기 때문에, 컴포넌트가 재렌더링될 때마다 같은 함수 인스턴스를 사용할 수 있어 성능 최적화에 도움을 줄 수 있습니다.handleClick2처럼 쓰는 이점은, 불필요한 함수 생성을 방지하여 메모리 사용을 최적화하고, 자식 컴포넌트에 props로 함수를 전달할 때 자식 컴포넌트의 불필요한 리렌더링을 방지할 수 있는 성능적 이점이 있습니다.
그러나 구체적인 사용 상황이나 성능 차이는 상황에 따라 다르므로, 실제 적용 시에는 특정 상황과 요구 사항에 맞게 선택하여 사용하는 것이 중요합니다.
답변 2