코딩 일지

리액트 성능 최적화 : useCallback, useMemo, Memo

liinyeye — Mon, 30 Dec 2024 22:38:26 +0900

프로젝트를 하다보면 성능 최적화를 의식해 useCallback, useMemo와 Memo를 습관적으로 사용하지만 정작 어떤 차이가 있는지 정확히 알지 못한 채 사용하고 있다는 것을 깨달았다. 그래서 useCallback, useMemo와 Memo 각각의 사용법에 대해 개념부터 다시 제대로 알아보려고 한다.

useCallback

함수의 재생성을 방지하는 React Hook

컴포넌트가 리렌더링되더라도 동일한 의존성 배열을 갖는 한, 이전에 생성한 함수를 재사용
함수가 자식 컴포넌트에 props로 전달될 때 유용. 왜냐면, 새로 생성된 함수는 참조가 바뀌어 자식 컴포넌트가 불필요하게 리렌더링될 수 있기 때문

어떻게 사용하는지?

컴포넌트의 리랜더링 방지

자바스크립트에서 function (){} 나 () => {} 은 항상 다른 함수를 생성한다. 따라서, 여기서 handleSubmit함수를 useCallbakc으로 감싸주지 않는다면 ProductPage 컴포넌트가 리렌더링 될때마다 새로운 함수가 생기게 되어 ShippingForm의 props는 절대 같아질 수 없고 자식컴포넌트의 memo최적화는 동작하지 않게 될 것이다.

import { useCallback } from 'react';

function ProductPage({ productId, referrer, theme }) {

  // useCallback으로 감싸지 않는다면 theme이 바뀔때마다 다른 함수가 될 것입니다...
  // 따라서, useCallback으로 감싸 React에게 리렌더링 간에 함수를 캐싱하도록 요청합니다...
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);  // ...이 의존성이 변경되지 않는 한...
  
  return (
    <div className={theme}>
    {/* ... 그래서 useCallback으로 감싸지 않을 경우, ShippingForm의 props는 같은 값이 아니므로 매번 리렌더링 할 것입니다. */}
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
  }

커스텀훅 최적화하기

커스텀 훅을 작성하는 경우, 반환하는 모든 함수를 useCallback으로 감싸는 것이 좋다. 이렇게 하면 Hook을 사용하는 컴포넌트가 필요할 때 가지고 있는 코드를 최적화할 수 있다.

function useRouter() {
  const { dispatch } = useContext(RouterStateContext);

  const navigate = useCallback((url) => {
    dispatch({ type: 'navigate', url });
  }, [dispatch]);

  const goBack = useCallback(() => {
    dispatch({ type: 'back' });
  }, [dispatch]);

  return {
    navigate,
    goBack,
  };
}

useMemo

리랜더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook

비용이 높은 로직의 재계산 생략
초기 렌더링 시, useMemo에서 얻을 수 있는 값은 계산 함수를 호출한 결과값이며, 종속성이 변경되기 전까지 리렌더링 사이의 계산 결과를 캐싱함

useCallback과 useMemo는 어떤 연관이 있나요?

두 훅은 모두 자식 컴포넌트를 최적화할 때 유용하다. 무언가를 전달할 때 memoization(캐싱)을 할 수 있도록 해준다.

import { useMemo, useCallback } from 'react';

function ProductPage({ productId, referrer }) {
  const product = useData('/product/' + productId);

  const requirements = useMemo(() => { // 함수를 호출하고 그 결과를 캐싱합니다.
    return computeRequirements(product);
  }, [product]);

  const handleSubmit = useCallback((orderDetails) => { // 함수 자체를 캐싱합니다.
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

  return (
    <div className={theme}>
      <ShippingForm requirements={requirements} onSubmit={handleSubmit} />
    </div>
  );
}

차이점은 무엇을 캐싱하는지!

useMemo는 호출한 함수의 결과값을 캐싱. 위 예시에서는 computeRequirements(product) 함수 호출 결과를 캐싱해서 product가 변경되지 않는 한 이 결과값이 변경되지 않도록 함. 이것은 불필요하게 ShippingForm을 리렌더링하지 않고 requirements객체를 넘겨줄 수 있도록 해주며, 필요할 때 React는 렌더링 중에 넘겨주었던 함수를 호출하여 결과를 계산함.
useCallback은 함수 자체를 캐싱. 전달할 함수를 캐싱해서 productId나 referrer이 변하지 않으면 handleSubmit자체가 변하지 않도록 함. 이것은 불필요하게 ShippingForm을 리렌더링하지 않고 handleSubmit함수를 전달할 수 있도록 해줌.

React.memo

React.memo는 props가 변경되지 않았을 때 렌더링을 막아주는 최적화 도구

부모 컴포넌트가 렌더링될 때 자식 컴포넌트도 리렌더링되는 상황에서, props가 변하지 않는다면 불필요한 렌더링을 방지. 하지만 props 변경 빈도 확인했을 때 isSelected와 같은 props의 변경 빈도가 높다면, React.memo의 비용이 렌더링 비용보다 클 수 있음.

참고 자료

리액트 공식 문서

기술블로그 이사, velog에서 티스토리로

liinyeye — Mon, 30 Dec 2024 19:03:30 +0900

기술블로그를 처음 작성할 때부터 어떤 플랫폼에 글을 써야할지 고민을 많이 했다.

길게 고민할 여유는 없어 일단 벨로그로 시작해 몇 달동안 글을 써왔다. 마크다운 문법에는 어느 정도 익숙해졌지만 그와 별개로 여러 가지 불편한 점들이 있었다.

우선 벨로그는 플랫폼 자체 유저가 많지 않고, SEO 노출이 잘 되지 않다보니 다른 사람들과 소통한다는 느낌이 잘 들지 않았다. 블로그는 다른 사람들과 소통하는 맛으로 방문자수도 확인하고 소소하게 댓글도 남기고 하는 재미가 있는데, 그런게 부족하다보니 아무래도 동기부여가 덜 됐던 것도 있는 것 같다.

또, 이미지를 넣을 때마다 아래 설명을 넣을 수 없다는 점이 불편했고 동영상도 매번 gif로 변환해서 삽입해야한다는 점도 좀 불편했다. 이 부분은 왜 개선이 안되는지 모르겠지만...이유가 있겠지..!

그리고 벨로그 앱이 있었다면 굳이 처음부터 노트북으로 쓰지 않아도 이동시간에 핸드폰으로 생각나는 것들을 좀 적어두면서 좀 더 가볍게 초안을 썼을 것 같은데 그런게 좀 아쉽다.

아무튼 2025년 새로운 마음가짐으로, 티스토리로 돌아와 다시 열심히 글을 써보려고 한다.

이전 기술 블로그를 보시고 싶은 분들은 아래 링크로 들어가주세요!

https://velog.io/@liin/posts

[팀프로젝트] Firebase 활용한 CRUD 문서 작성하기

liinyeye — Fri, 19 Apr 2024 20:39:40 +0900

이번 팀프로젝트에서는 CRUD를 구현하고 활용해야했다. 하지만 CRUD에 대해서 처음 들어본 나는 먼저 어떤 개념인지 파악을 하기위해 CRUD가 뭔지 찾아봤다.

CRUD 문서란?

CRUD (생성(Create), 읽기(Read), 갱신(Update), 삭제(Delete))는 저장된 데이터에 대해 작업할 수 있는 방법의 약어입니다. 영속적인 저장소의 4가지 기본 기능에 대한 연상기호입니다. CRUD는 일반적으로 데이터베이스나 데이터 저장소에서 수행되는 작업을 의미하지만, 데이터가 실제로 삭제되지 않지만 상태에 삭제된 것으로 표시되는 일시 삭제와 같은 애플리케이션의 고수준 기능에도 적용될 수 있습니다.

<출처 : https://developer.mozilla.org/ko/docs/Glossary/CRUD>

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다.

<출처 : https://ko.wikipedia.org/wiki/CRUD>

이름	조작	SQL
Create	생성	INSERT
Read(또는 Retrieve)	읽기(또는 인출)	SELECT
Update	갱신	UPDATE
Delete(또는 Destroy)	삭제(또는 파괴)	DELETE

출처

즉, 데이터를 만들고, 읽고, 쓰고 ,삭제하는 기능으로 프로그램을 만드는 데 있어서 꼭 필요하다.

그럼 팀 소개 페이지에서 어떻게 CRUD를 구현하는가?

개인 페이지에 댓글을 남길 수 있는 방명록을 활용했다.

Creat(생성)	방명록 생성
Read(읽기)	firestore에 저장된 방명록 항목 조회
Update(수정)	등록된 방명록 내용 수정
Delete(삭제)	등록된 방명록 삭제

Firebase CRUD 공식 문서

Create

Cloud Firestore에 데이터 추가 | Firebase

5월 14일, Google I/O에서 Firebase를 다시 만나보세요. 지금 등록하기 의견 보내기 Cloud Firestore에 데이터 추가 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 다음

firebase.google.com

Read

한 개

Cloud Firestore로 데이터 가져오기 | Firebase

5월 14일, Google I/O에서 Firebase를 다시 만나보세요. 지금 등록하기 의견 보내기 Cloud Firestore로 데이터 가져오기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

firebase.google.com

여러 개

Cloud Firestore로 데이터 가져오기 | Firebase

firebase.google.com

Update

Cloud Firestore에 데이터 추가 | Firebase

firebase.google.com

Delete

Cloud Firestore에서 데이터 삭제 | Firebase

5월 14일, Google I/O에서 Firebase를 다시 만나보세요. 지금 등록하기 의견 보내기 Cloud Firestore에서 데이터 삭제 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 다

firebase.google.com

[팀 프로젝트] html, css, js로 전체 화면 캐러셀 구현하기

liinyeye — Wed, 17 Apr 2024 20:59:29 +0900

현재 상황

팀과 팀원을 소개하는 미니 프로젝트를 진행 중이다. 레이아웃이 백프로 마음에 들지는 않았지만, 메인 화면 텍스트 레이아웃에 대해서 충분히 고민할 시간은 없어 일단 그대로 진행하기로 결정했다. 일단 내가 맡은 부분은 상세페이지 구현이었는데, 레이아웃까지는 익숙한 코드라 무리없이 잘 만들었지만 아직 자바스크립트가 익숙치 않아 어떻게 시작해야할지 막막했다.

메인 화면 1

메인 화면 2

문제점

이번에 캐러셀을 처음 구현해보는거라 보통 캐러셀을 구현할 때 이미지 단위로 슬라이드를 넘기는데, 디자인과 기획 상 전체 화면이 넘어가는 방식으로 캐러셀을 구현해야 했다. 처음에는 html 파일을 여러 개를 만들어 버튼을 누르면 다른 html 파일로 넘어가도록 해야하나했는데, 팀원들과 논의 해보니 이미지처럼 div 여러 종류를 만들어 그게 화면에서 슬라이드 되도록 구현하기로 정했다.

일단 구글링해서 찾은 기존 캐러셀 구현하는 방식대로 버튼을 누르면 x축으로 화면 너비만큼 이동하게끔 코드를 짜봤는데, 화면 넘어가는게 매끄럽지 않았다. 또한 캐러셀을 넘기면서 캐러셀 순서에 맞게 아이콘이랑 프로필 배경 이미지도 바뀌어야 하는데, 이 부분 코드를 어떻게 동작시켜야할지 난감했다.

const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
const carouselSlide = document.querySelector(".carousel-slide");
const carousel = document.querySelectorAll(".carousel");

let index = 0;
const itemNumbers = carousel.length;
// 캐러셀 아이템 갯수 지정

function clickPrevBtn(e){
    if (index === 0) {
        return;
    } else if (index -= 1) {
        carouselSlide.style.transform = `translateX(-100vw)`;
    }
}

function clickNextBtn() {
    if (index === itemNumbers - 1) {
        return;
    } else if (index += 1) {
        carouselSlide.style.transform = `translateX(100vw)`;
    }
}

prevBtn.addEventListener("click", clickPrevBtn);
nextBtn.addEventListener("click", clickNextBtn);

해결 방법

일단 더 코딩을 잘 하시는 다른 팀원분이 코드를 짜주셨다. 앞뒤로 버튼을 움직이면서 캐러셀이 무한히 움직이도록 캐러셀을 원래보다 앞 뒤로 하나씩 더 추가한 부분을 확인할 수 있었다.

HTML 코드

(.carousel-box div안의 내용은 너무 길어 생략)

[전체 구조]

버튼과 캐러셀을 감아주는 .wrapper div

> 앞, 뒤 button & carousel wrapper로서의 div

> carousel을 여러 개 담을 .carousel-container div

> 개별 .carousel-box div

 <body>
    <div class="wrapper">
      <button class="prev" type="button">
        <i class="fa-solid fa-caret-left fa-2x"></i>
      </button>
        <!--Carousel-->
        <div style="overflow: hidden">
          <div class="carousel-container">
            <!--무한히 움직일 수 있도록 마지막꺼 맨앞으로(편법임)-->
            <div class="carousel-box"><div>
            <div class="carousel-box"><div>
            <div class="carousel-box"><div>
            <div class="carousel-box"><div>
            <div class="carousel-box"><div>
            <div class="carousel-box"><div>
            <!--무한히 움직일 수 있도록 마지막꺼 맨앞으로(편법임)-->
            <div class="carousel-box"><div>
          </div>
        </div>
      <button class="next" type="button">
        <i class="fa-solid fa-caret-right fa-2x"></i>
      </button>
    </div>

JS 코드

    <!--Carousel-->
    <script>
      const carousel = document.querySelector(".carousel-container");
      const carouselBox = document.querySelectorAll(".carousel-box");
      const icons = document.querySelectorAll(".icons");
      const icon = document.querySelectorAll(".icon");
      const nextBtn = document.querySelector(".next");
      const prevBtn = document.querySelector(".prev");

      // 원하는 배경색 헥스코드로 넣기
      const myBackGroundColor = [
        "#618a58", // 홍유나
        "#8fbcdb", // 이준혁
        "#bba2fe", // 복예린
        "#e2c881", // 김승회
        "#288292", // 채종민
      ];

      let idx = 1;
      //함수에서 인자로 boolean을 사용하기 위해 변수를 지정해준다.
      let isInteraction = false;

      const setTransition = (value) => {
        carousel.style.transition = value;
      };

      const setTranslate = () => {
        carousel.style.transform =
          "translateX(" + (-100 / carouselBox.length) * idx + "%)";
      };

      const setBackGroundColor = () => {
        const myIcon = icons[idx].getElementsByClassName("icon")[idx - 1];
        // const myBgColor = bgColors[idx].getElementsByClassName("left-left")[idx - 1];
        // myBgColor.style.backgroundColor = myBackGroundColor[idx - 1];
        myIcon.style.backgroundColor = myBackGroundColor[idx - 1];
        myIcon.style.boxShadow = "0px 0px 10px 5px rgba(0, 0, 0, 0.15)";
      };

      const interaction = () => {
        isInteraction = true;
        setTimeout(() => {
          isInteraction = false;
        }, 600);
      };

      /** 버튼 클릭 시 슬라이드 되는 스타일 변경을 담당 */
      const slide = (idx) => {
        interaction();
        setTransition("300ms all ease-in");

        setTimeout(() => {
          setTransition("");
        }, 300);

        setTranslate();
      };



      const init = () => {
        setBackGroundColor();
        setTranslate();
      };

      init();

      icon.forEach(icon => {
        icon.addEventListener("click", function(e) {
            let parent = e.currentTarget.parentElement;
            let children = parent.children;
            let index = Array.prototype.indexOf.call(children, e.currentTarget) + 1;
            if(idx !== index){
                idx = index;
                slide(idx);
                setBackGroundColor();
            }
        });
      });

      nextBtn.addEventListener("click", () => {
        if (isInteraction) return;
        if (idx >= carouselBox.length - 1) idx = -1;
        idx++;
        slide(idx);

        if (idx === 6) {
          idx = 1;

          setTransition("300ms all ease-in");
          setTimeout(() => {
            setTransition("");
            setTranslate();
          }, 300);
        }
        setBackGroundColor();
      });

      prevBtn.addEventListener("click", () => {
        if (isInteraction) return;
        if (idx <= 0) idx = carouselBox.length;
        idx--;
        slide(idx);

        if (idx === 0) {
          idx = 5;

          setTransition("300ms all ease-in");
          setTimeout(() => {
            setTransition("");
            setTranslate();
          }, 300);
        }
        setBackGroundColor();
      });
    </script>

느낀점

js 동작 코드에서 캐러셀 버튼을 누르면 어떤 변화가 생겨야하는지 대략 이해는 가는데, 아직 화살표 함수와 다양하게 함수를 정의하고 사용하는 방법에 익숙하지 않아 코드를 봐도 어떤 방식으로 돌아가는지 잘 이해가 되지 않았다.

일단 자바스크립트 강의 복습이랑 추가로 ES6 강의를 듣고 개념을 이해하는 것부터 더 필요할 것 같다.