[React-Native] #5_리액트 훅 (2) useMemo&useCallback

목차

• 캐시?
• useMemo
• useCallback

---

1. 캐시?

useMemo와 useCallback은 각각 값과 함수를 캐시 하는 시스템이다.
캐시란 실제데이터를 가지지 않고 리액트 프레임워크 내부에 저장을 하고 이를 불러와서 사용하는 시스템이다.
리액트 훅의 useMemo와 useCallback은 의존성이 바뀌면 자동으로 캐시의 값을 갱신해주고 이를 화면에 반영하게 된다.

---

2. useMemo

• 형식
  

  import {useMemo} from 'react'
  
  const 캐시_데이터 = useMemo(콜백함수, [의존성목록])
  //콜백_함수는 데이터를 반환 ex) () => 원본_데이터

• 함수 컴포넌트 안에 생성된 데이터는 해당 컴포넌트가 렌더링 될때마다 재생성되는 문제가 있다
  따라서 데이터를 useMemo훅으로 캐시에 저장해서 한 번만 생성하고 관리할 수 있도록 할 필요가 있다
  메모이제이션 기능
  
  
• useMemo로 factorial구현 (메모이제이션)
  

  import React, {useMemo} from 'react'
  import {SafeAreaView, Text, StyleSheet} from 'react-native'
  
  const factorial = (n: number) : number => {
    if(n == 0) return 1;
    else if(n == 1) return 1;
    else return factorial(n-1) * n
   }
  
   export default function App() {
    const memoizedFactorial = useMemo(()=> factorial,[])
  
    const result = new Array(11).fill(null)
    .map((notUsed, index) =>
      <Text style={styles.text}>{index}! = {memoizedFactorial(index)}</Text>
    )
  
    return (
        <SafeAreaView style={styles.view}>
          {result}
        </SafeAreaView>
    )
  }
  
  const styles = StyleSheet.create({
    view: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: 'black'
    },
    text: {
      margin : 10,
      fontSize: 20,
      color: 'white'
    },
  })

---

2. useMemo

• 형식
  

  import {useCallback} from 'react'
  
  const 캐시_함수 = useCallback(사용할_콜백함수, [의존성목록])

• 함수 컴포넌트 안에 생성된 함수 또한 해당 컴포넌트가 렌더링 될 때마다 재생성되는 문제가 있다
  따라서 함수를 useCallback훅으로 캐시에 저장해서 한 번만 생성하고 관리할 수 있도록 할 필요가 있다
  
  
• useCallback으로 클릭 시 다른 alert
  

  import React, {useCallback} from 'react'
  import {SafeAreaView, Button, Alert} from 'react-native'
  
  export default function App() {
  
    const buttonClick = useCallback(
      (name: string) => () => Alert.alert(`${name} button clicked`), [])
    
    return(
      <SafeAreaView>
        <Button title='안녕' onPress={buttonClick('안녕')}/>
        <Button title='내이름은' onPress={buttonClick('내이름은')}/>
        <Button title='2HS' onPress={buttonClick('2HS')}/>
      </SafeAreaView>
    )
  }