react UseMemo 사용하여 특정 함수만 호출되는 예제 보기 / typescript / useCallback함수 이용하여 버튼 클릭시 숫자 증가시키기

실행구문

npx react-native init sample22 --template react-native-template-typescript

 

App.tsx

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

/*
useMemo: 연산된 값을 렌더링시에 재사용할때 사용된다
useMeMo(func,검사할 배열 )
*/

function square(params:any){
  const testData = [Array(10).keys]
  testData.forEach(()=>{
  console.log(`계산중.. 루프처리 ${testData.length}회 실행중..`)

})
return params * params
}

export default function App(){

  const[countStateA,setcountStateA] = useState( 0 )
  const[countStateB,setcountStateB] = useState( 0 )


  function countResultA(){
    setcountStateA((prevCount)=>prevCount+1)
    console.log("A+1 버튼이 클릭되었습니다.")
  
  }

  function countResultB(){
    setcountStateB((prevCount)=>prevCount+1)
    console.log("B+1 버튼이 클릭되었습니다.")
  
  }
 //첫번째 값 useState(0) 이므로 params*params=0
 // const squarArea = square(countStateB) / A+1 버튼 눌렀어도 squre 함수 실행
 
  //useMemo 사용했을때는 계산 B+1 눌렀을때만 squree 함수가 실행
 const squarArea = useMemo(()=>square(countStateB),[countStateB])


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

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

      <Text>정사각형 면적</Text>
      <Text>계산 결과 X 계산 결과 ={squarArea}</Text>

    </View>
  )

}

실행화면

 

useMemo 대신 const squarArea = square(countStateB) 코드를 실행하고 A+1 버튼 눌렀을때 터미널

 

A+1버튼 누를때 squre함수도 같이 실행되는 중

 

 

 

 

const squarArea = useMemo(()=>square(countStateB),[countStateB])  사용한 터미널

A+1버튼 누를때 squre함수가 실행되지 않는다.

---

실행구문

npx react-native init sample23 --template react-native-template-typescript

App.tsx

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

/*
useCallback: 함수 재사용
*/

const MyButton = React.memo(({buttonValue,counterState}: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>B button{countStateB}</Text>
  <MyButton counterState={countIncrementB} buttonValue='B button'/>
</View>

  )

}

 

 

위의 코드를 실행하면 버튼을 누릴때마다 button이란 텍스트 옆의 숫자가 증가한다.