React : useCallback

[ useCallback ]

< app.js>
import React from ‘react’
import {useState , useCallback} from ‘react’

function App()
{
        const [number , setNumber ] = useState(0)   // number = 0 으로 초기화

        const add = useCallback( () => {
            setNumber(number + 1); 
            //  number 는 memoization 된 값을 사용하지만, 실제 number+1 결과를 밖에 있는 실제 number 변수에 반영한다.
        } ,[] );

        const newSetNumber() => {
             setNumber(100);
        }
        // number 는 0 값으로 저장(memoization) 되어있음 
        // ① [숫자100설정] 클릭 newSetNumber  함수로 number 값이 100 으로 변경 , number 실제 반영됨 ( number = 100)
        // ② [더하기+1]  add 함수 호출시 , 이미  number  = 100  이긴하나,  add 함수에서는 0 으로 저장 되어있는 number 사용,
               setNumber(number+1) 은, 100 + 1 이 아닌 , 0 + 1 로 계산하여  number에는  실제 반영됨 (number = 1)

        const addSycn = useCallback( () =>  {
            setNumber( n => n + 1); 
        }
      // ★★★  자신의 상태변수를 인자로하는 콜백함수로 전달 할 경우 “동기식” 처리가 되며, 
      // 자신의 상태변수를 인자로 가져올때 최신 업데이트된 변수를 가져오므로 memoization 된 함수안에서도
      //  매번 함수를 재생성 하지 않터라도 최근 값으로 처리가 가능하다.

        // 콜백함수를 통해 처리 할 경우, number 는 0 으로 저장(memoization) 되어있지만, 인자 n 은 실제 number 가 
        // 가지고 있는 최신값을 전달하여 , useCallback 함수임에도 불구하고 최신값으로 업데이트가 가능함(동기식)
        // ① [숫자100설정] 클릭 newSetNumber  함수로 number 값이 100 으로 변경 , number 실제 반영됨 ( number = 100)
        // ② [더하기+1 (동기)]  addSync 함수 호출시 , setNumber 콜백함수에서 변수 인자 n 에  number 값 100을  전달함
               setNumber( n => n+1) 100 + 1로 계산하여  number에는  실제 반영됨 (number = 101)

        const output =  () => {
           console.log(number);
        });
        // ① newSetNumber  함수를 통해 number 값이 100 으로 변경하여, number 에 반영
        // ② 정상적으로 100 출력

        const outputCallback = useCallback( () => {
           console.log(number);
        } , [ ]); 

        // ① newSetNumber  함수를 통해 number 값이 100 으로 변경하여, number 에 반영
        // ②  0 출력함  = number 는 100으로 변경되어있으나 , useCallback 으로 함수가 저장될때 number 가 0 이었으므로 
        // 정상 출력을 원한다면, 의존성배열에 [number] 를 주입하면,  number 가 변경 될때 마다 함수를  재생성 되어,
          함수안에서 사용되는 number의 최신 update 된 값을 사용 할 수 있다.

        return (
               <div> 
                                <button onClick={add}>더하기+1 </button>
                                <button onClick={addSycn}>더하기+1 (동기)</button>
                                <button onClick={newSetNumber}>숫자 100설정</button>
                                <button onClick={output}>숫자출력 </button>
                                <button onClick={outputCallback}>숫자출력 </button>
                </div>
        )
}