POB_TIL 05

이지훈·2022년 5월 8일
0

프리온보딩_TIL

목록 보기
5/22

useMemo, useCallback

존재는 알고 있지만 언제어디서써야할지 애매한 친구들이다.
React 컴포넌트 내부에 함수나 변수를 선언하면 이게 그대로 있는게 아니라 렌더링할때마다 계속해서 다시 생성된다. 만약 렌더링이 엄청 많이 일어나는 컴포넌트라면 성능이 저하될 수 있다.
이를 위해 일종의 캐시 역할을 해주는것이 useMemo와 useCallback.
useMemo는 값, useCallback은 이름에서 알 수 있듯이 함수를 저장한다.
하지만 이걸 쓴다고 무조건 성능이 드라마틱하게 좋아지는것은 아니라 모든 곳에 다 사용하는것은 안되고 필요할 지 판단하여 사용한다.

  • 값을 기억해 렌더링될때마다 다시 생성하는것 방지.
  • useMemo는 값, useCallback은 함수에 사용
  • 무조건 사용하지 말고 필요한 만큼 비용이 큰 값에 사용

이미지 최적화

이미지 파일 크기가 너무 크게 되면 로드가 느려지고 사용자는 불편하게 기다려야 한다. 이미지 최적화가 아주 중요하다.
만약 조그만한 썸네일용 이미지인데 엄청 큰 몇 MB씩 하는 원본 파일을 그대로 사용한다면 그건 매우 큰 낭비가 된다. 이를 막기 위해서는 용도와 크기별로 적절하게 이미지를 가공하여 저장해서 적재적소에 사용해야 한다.

png파일에서 사용되는 색이 많지 않다면 색 팔레트를 줄여서 용량을 줄일 수도 있다.
webp같은 경우 효과는 좋지만 브라우저 지원이 원활하지 않아 사용이 어렵다.

도움

profile
안녕하세요! 대학교 졸업한 이지훈입니다.

0개의 댓글