[클라우딩 어플리케이션 엔지니어링 TIL] 240207 - React 기본. 간단한 일기장 프로젝트 3

Intro

---

리액트에서 useMemo와 React.memo에 대해 학습했다.

강의는 길지 않았지만 조금 헷갈리기 시작했따.. 꼼꼼히 복습을 해야겠다.

 

 

 

오늘 학습한 내용

: API 호출하기, Memoization(useMemo, React.memo)

---

React에서 API 호출하기

세부 목표

• useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고
• 해당 API 결과값을 일기 데이터의 초기값으로 이용하기

JSONPlaceholder: API호출 테스트를 위해 샘플 데이터를 제공하는 REST API 서비스

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

API 호출 예시)

const getData = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/comments').then((res) => res.json());
  console.log(res);
};

useEffect(() => {
  getData();
}, []);

: fetch함수로 API를 호출하고 Mount 시점에 API를 호출하는 함수인 getData를 호출하기 위해 useEffect를 이용한다.

 

React Developer Tools: 리액트 개발할 때 유용한 크롬 확장 앱

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools

 

 

 

최적화1 - 연산 결과 재사용 (useMemo)

세부 목표

• 현재 일기 데이터를 분석하는 함수를 제작하고 해당 함수가 일기 데이터의 길이가 변화하지 않을 때 값을 다시 계산하지 않도록 하기

✅ Memoization 이해하기!
: 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법

 

// data.length가 변화할 때만 콜백 함수가 실행됨
const getDiaryAnalysis = useMemo(() => {
  console.log('일기 분석 시작');

  const goodCount = data.filter((item) => item.emotion >= 3).length;
  const badCount = data.length - goodCount;
  const goodRatio = (goodCount / data.length) * 100;
  return { goodCount, badCount, goodRatio };
}, [data.length]);

// getDiaryAnalysis는 useMemo를 사용해 값을 리턴함
const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

 

 

최적화2 - 컴포넌트 재사용 (React.memo)

state가 변경돼 리렌더될 필요 없는 TextView 컴포넌트까지 렌더링 되는 문제를 해결하기 위해 React.memo를 사용함

React.memo: 함수형 컴포넌트에게 업데이트 조건을 걸자

https://ko.legacy.reactjs.org/docs/react-api.html#reactmemo

React 최상위 API – React

import React, { useEffect, useState } from 'react';

const CounterA = React.memo(({ count }) => {
  useEffect(() => {
    console.log(`CounterA update - count: ${count}`);
  });
  return <div>{count}</div>;
});

const CounterB = React.memo(({ obj }) => {
  useEffect(() => {
    console.log(`CounterB update - count: ${obj.count}`);
  });
  return <div>{obj.count}</div>;
});

const OptimizeTest = () => {
  const [count, setCount] = useState(1);
  const [obj, setObj] = useState({
    count: 1,
  });

  return (
    <div style={{ padding: 50 }}>
      <div>
        <h2>Counter A</h2>
        <CounterA count={count} />
        <button onClick={() => setCount(count)}>A button</button>
      </div>
      <div>
        <h2>Counter B</h2>
        <CounterB obj={obj} />
        <button
          onClick={() =>
            setObj({
              count: obj.count,
            })
          }
        >
          B button
        </button>
      </div>
    </div>
  );
};

export default OptimizeTest;

 

CounterA 컴포넌트는 버튼을 눌렀을 때 count 값이 변하지 않았으므로 렌더링되지 않음

CounterB 컴포넌트는 버튼을 눌렀을 때 CounterA와 달리 값이 변경됐다고 리렌더링 됨 ➡️ 객체 얕은 복사

 

props가 갖는 복잡한 객체에 대해 얕은 비교만을 수행하는 것이 React.memo의 기본 동작이다. 다른 비교 동작을 원한다면, 두 번째 인자로 별도의 비교 함수를 제공하면 된다.

• areEqual

import React, { useEffect, useState } from 'react';

const CounterB = ({ obj }) => {
  useEffect(() => {
    console.log(`CounterB update - count: ${obj.count}`)
  });
  
  return <div>{obj.count}</div>;
}

const areEqual = (prevProps, nextProps) => {
  return prevProps.obj.count === nextProps.obj.count;
}

const MemoizedCounterB = React.memo(CounterB, areEqual)

const OptimizeTest = () => {
  const [obj, setObj] = useState({
    count: 1,
  });
  
  return (
    <div style={{ padding: 50 }}>
      <div>
        <h2>Counter B</h2>
        <MemoizedCounterB obj={obj} />
        <button onClick={() => setObj({ count: obj.count })}></button>
      </div>
    </div>
  );
};

export default OptimizeTest;

 

 

 

 

 

 

마무리

---

React 최적화 방법으로 useMemo와 React.memo에 대해 배웠다.

렌더링을 많이 하면 성능이 저하되는 문제가 있기 때문에 항상 렌더링을 최소화하는 방법을 생각하며 코드를 짜야겠다.