개발자
usecallback을 사용하여, 참여기능, 좋아요기능 함수에 usecallback으로 감싼것을 성능최적화 경험이라고 할수있을까요 ? 참여나 좋아요 함수가 다른 함수들 때문에 불필요한 리렌더링이 될수가있어서.. 사용해보았는데 궁금합니다. 이외 다른..실무에서 usecallback이 사용되는 경우가 궁금합니다.
답변 1
단순히 어떤 기능에 어떤 도구를 사용했다는 걸 성능 최적화 경험이라고 말할 수 없습니다. 어떤 변경을 통해 검증 가능한 변화를 보여줄 수 있어야 성능 최적화라고 말할 수 있죠. 이 경우엔 성능 이슈가 있는 함수에 useCallback을 사용하여 메모이제이션함으로써 사용하지 않았을 때보다 렌더링 성능에 기여했음을 수치로 보여줄 수 있어야겠죠. useCallback은 아무 곳에서나 성능을 개선시켜주는 마법같은 도구가 아닙니다. 오히려 잘못 사용하면 비용이 더 커질 수도 있어요. 메모이제이션 비용 자체가 그러하고, 의존성 배열 관리도 비용이 될 수 있습니다. "컴포넌트가 생성될 때마다 어떤 함수가 재생성되는 것을 방지해야하는가?" 이 질문에 확실한 근거를 갖고 대답할 수 있는 경우에 사용을 고려하시면 됩니다. 이 질문에 제대로 대답할 수 없거나 useCallback을 쓰지 않았을 때 딱히 이슈가 발생하지 않았다면 쓰지 않는 것을 권장합니다. 보통은 쓰지 않는 게 성능과 가독성 측면에서 오히려 낫습니다. 첨언하자면, 좋아요 기능과 관련하여 성능 개선을 해보고 싶으시다면 optimistic ui를 구현해보시는 걸 추천드립니다.
익명
작성자
2024년 06월 19일
오 답변 감사합니다. optimistic에 대해서 새로 알게됐습니다. ㅎㅎ 그럼 optimistic ui사용할때에 성능체크를 데이터를 근거로 내세우려고 한다면 리액트 프로파일러 같은걸로 성ㅇ능체크를할때 어느부분들을 살펴보아야하는지도 조언 해주실수있을까요 ?
김하늘
프론트엔드 개발자 • 2024년 06월 19일
네트워크 탭의 응답 속도 등을 근거로 제시할 수 있을 거 같습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 06월 18일
네, `useCallback`을 사용하여 불필요한 리렌더링을 최소화하는 것은 React 컴포넌트의 성능 최적화 방법 중 하나입니다. 하위 컴포넌트에 props로 함수를 전달할 때, 상위 컴포넌트가 리렌더링될 때마다 새로운 함수가 생성되어 하위 컴포넌트도 함께 리렌더링 되는 문제를 해결하기 위해 `useCallback`을 사용합니다. `useCallback`은 메모이제이션(memoization)된 콜백 함수를 반환해 이 문제를 해결하는데 도움이 됩니다. 그러나, `useCallback` 은 그 자체로 비용이 들기 때문에 맹목적인 사용보다는 필요한 경우에만 사용하는 것이 기본 원칙입니다. 예를 들어, 만약 콜백 함수 내에서 참조하는 값이 자주 변경되면 `useCallback`으로 메모이제이션 하는 것보다 그냥 콜백 함수를 그대로 사용하는 것이 성능상 이점을 가질 수 있습니다. 실무에서는 이 외에도 스크롤 이벤트 핸들러나 setTimeout/setInterval의 콜백 함수 등 재생성 시 비용이 큰 함수 또는 측정치 수집, API 호출 등의 side effect를 내는 함수를 `useCallback`으로 감싸 사용할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!