개발자

useCallback 으로 내부 컴포넌트를 선언하고 사용할 경우 얻는 장점이 무엇인가요?

2023년 02월 06일조회 225

아래 코드와 같이 내부에서 사용하는 컴포넌트를 useCallback 으로 선언해서 사용하는 코드가 있습니다. 저는 InnerComponent 를 새로운 컴포넌트로 만들고 props 만 넘겨주는게 더 효율적일 것 같아요. 이렇게 useCallback 을 사용해서 컴포넌트를 선언해서 얻는 장점이 있는 걸까요 ?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

인기 답변

Gorilla.Kim님의 프로필 사진

안녕하세요 : ) 해당 컴포넌트만 봤을때에는 큰 효용이 없을것 같아요. 이유는 기본적으로 상태가 변경되면 해당 상태를 선언한 컴포넌트가 재랜더가 되기 때문인데요, useCallback 디펜던시 배열에 관련 상태를 넣었기 때문에 해당 함수 또한 재 호출이 이루어지기 때문입니다. 하지만, 첨부주신 코드에는 없지만, 부모 컴포넌트에서 특정 상태를 내려받아 활용하고 계시다면? useCallback이 조금 의미가 있을수도 있을것 같아요! 간혹, 부모의 랜더와 상관없이 자식 컴포넌트 상태를 유지하고 싶을때가 있는데 그럴때 useCallback, useMemo,를 많이 사용합니다 ㅎㅎ 함수형으로 선언된 리액트 컴포넌트도 함수가 맞아 useCallback을 적용이 가능하지만, 보통 컴포넌트는 React.Memo로 메모리에 올려 사용하는것 같습니다 ㅎㅎ 해당 메서드도 활용해보시면 좋을것 같아요!

Gorilla.Kim님의 프로필 사진

Gorilla.Kim

매드업 프론트엔드 개발자2023년 02월 06일

해당 컴포넌트만 봤을때 만약 저였다면, 메모이제이션 안하고 그대로 상태를 내려줄것 같습니다 ㅎㅎ 해당 코드에서는 useCallback이 의미가 없어보여요! 지금은 상태가 단순히 어떠한 가공없이 사용하는 형태지만, 만약 map등을 통해 후가공을 하고 있다면 그때는 useCallback이 의미가 생길것 같습니다. 하지만 컴포넌트 자체보다는 해당 상태만 useMemo 처리해서 사용하는게 메모리관점에서 더 득이될것 같아요!

profile picture

익명

작성자

2023년 02월 07일

오 그렇군요!!! 부모의 렌더와 상관 없이 자식 컴포넌트 상태를 유지하고 싶을 때!! 설명과 충분한 예시 감사합니다 큰 도움이 되었어요!!

😎님의 프로필 사진

음... 잘모르겠네요. 개인적으로 JSX를 return 하는 함수는 컴포넌트로 따로 만들어서 JSX 스럽게 쓰는걸 선호합니다. <div>{InnerComponent()}</div>; -> <div> <InnerCompoent /> <div> 만약 최적화가 필요한 경우이면 함수의 경우 useCallback 컴포넌트의 경우 React.memo 를 사용하시면 됩니다. useCallback을 사용하시게되면 내부적으로 비교하는 로직이 있어서 잘못 사용할 경우 오히려 자원을 더 소비 할 수도 있습니다. (React.memo 도 마찬가지)

profile picture

익명

작성자

2023년 02월 09일

그렇군요!! 좋은 답변 감사합니다!!!!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!