[React Native] useMemo

useMemo

동일한 연산의 반복 수행을 제거해 성능을 최적화

코드

useMemo(() => {함수}, [함수 실행 조건]);

두번째 파라미터인 함수 실행 조건은 배열
렌더링 될때마다 호출하는것이 아닌 지정된 값에 변화가 있는 경우에만 함수가 호출

예제1

useMemo 미사용

import React, { useState, useMemo } from 'react';
import { StyleSheet, SafeAreaView, Text, Button } from "react-native";

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: "center",
    marginTop: 10,
    marginBottom: 10,
    paddingHorizontal: 10,
    height: 40,
  }
})

const getLength = text => {
  console.log(`Target Text: ${text}`);
  return text.length;
};

const list = ['textsize10', 'textsize9', 'textsize9', 'textsize10'];

let idx = 0;
const Length = () => {
  const [text, setText] = useState(list[0]);
  const [length, setLength] = useState('');

  const _onPress = () => {
    setLength(getLength(text));
    ++idx;
    if (idx < list.length) setText(list[idx]);
  };

  return (
    <>
      <Text style={styles.text}>Text: {text}</Text>
      <Text style={styles.text}>Length: {length}</Text>
      <Button title="Get Length" onPress={_onPress} />
    </>
  );
};

export default Length;

값의 변화가 없어도 계속 getLength함수가 호출

예제 2

useMemo 사용

import React, { useState, useMemo } from 'react';
import { StyleSheet, SafeAreaView, Text, Button } from "react-native";

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: "center",
    marginTop: 10,
    marginBottom: 10,
    paddingHorizontal: 10,
    height: 40,
  }
})

const getLength = text => {
  console.log(`Target Text: ${text}`);
  return text.length;
};

const list = ['textsize10', 'textsize9', 'textsize9', 'textsize10'];

let idx = 0;
const Length = () => {
  const [text, setText] = useState(list[0]);

  const _onPress = () => {
    ++idx;
    if (idx < list.length) setText(list[idx]);
  };
  const length = useMemo(() => getLength(text), [text]);

  return (
    <>
      <Text style={styles.text}>Text: {text}</Text>
      <Text style={styles.text}>Length: {length}</Text>
      <Button title="Get Length" onPress={_onPress} />
    </>
  );
};

export default Length;

useMemo를 사용해 text의 값이 변경되었을 때만 text의 길이를 구함
이로써 중복 연산을 방지해 성능 최적화 가능