[React Native] useMemo, useCallback

useMemo

---

컴포넌트를 렌더링할 때 연산된 값을 재사용한다면 useMemo가 사용된다.

import React, { useMemo, useState } from 'react';
import { Text, View, Button } from 'react-native';


// useMemo: 연산된 값을 렌더링할 때 재사용하는 경우에 씀.
// useMemo(함수, [검사할 배열])

const square = (param:number) => {
  const testData = [ Array(10).keys ];
  testData.forEach(() => {
    console.log(`계산중 ... 루프처리 ${testData.length}`);
  });

  return param * param
};

매개변수로 받는 값을 제곱하여 리턴해주는 함수이다. 테스팅시 사용되는 것이다.

export default function App() {
  const [countStateA, setCountStateA] = useState(0);
  const [countStateB, setCountStateB] = useState(0);

  function countResultA() {
    setCountStateA((prevCnt) => prevCnt + 1);
    console.log("A + 1 버튼이 클릭됨.");
  }

  function countResultB() {
    setCountStateB((prevCnt) => prevCnt + 1);
    console.log("B + 1 버튼이 클릭됨.");
  }

  // 일반적인 경우 예제
  // const sqrArea = square(countStateB)

  // useMemo
  const sqrArea = useMemo(() => square(countStateB), [countResultB])

  return (
    <View>
      <Text>계산결과 A: {sqrArea}</Text>
      <Button title="계산: A + 1" onPress={countResultA} />

      <Text>계산결과 B: {sqrArea}</Text>
      <Button title="계산: B + 1" onPress={countResultB} />

      <Text>정사각형 면적</Text>
      <Text>계산 결과 x 계산 결과 = {sqrArea}</Text>
    </View>
  )
}

각각의 버튼이 클릭될 때 countState의 값을 변화시킬 함수를 작성하였다.

useMemo를 사용하여 B로 들어가는 값에 대해 제곱한 결과를 반환한다. 이 때 square 함수 내부의 모든 내용이 실행되지 않고, 연산결과만 바뀌어 출력된다.

다시 말해서 메모리에 저장되어 있다가 변화하는 값만 바뀌는 방식으로, 메모리의 낭비를 막을 수 있다.

useCallback

---

함수를 재사용할 때 사용하는 hook이다.

import React, { useState, useCallback } from 'react';
import { View, Button, Text } from 'react-native';

// useCallback: 함수 재사용

const MyButton = React.memo(({ counterState, buttonValue }:any) => {
  console.log(`${buttonValue}가 클릭됨.`)
  return <Button title={buttonValue} onPress={counterState} />
})


export default function App() {

  const [countStateA, setCountStateA] = useState(0);
  const [countStateB, setCountStateB] = useState(0);

  const countIncrementA = useCallback(() => setCountStateA(countStateA + 1), [countStateA]);
  const countIncrementB = useCallback(() => setCountStateB(countStateB + 1), [countStateB]);

  return (
    <View>
      <Text>A Button {countStateA}</Text>
      <MyButton counterState={countIncrementA} buttonValue='A Button' />
      <Text>A Button {countStateB}</Text>
      <MyButton counterState={countIncrementB} buttonValue='B Button' />
    </View>
  )
}