# useCallback을 사용한 함수는 어디서나 동일할까?
###### tags: `tech sharing`

## useState와 useCallback 사용하는 경우

import React, { useState, useCallback } from 'react';

const Test = () => {
  const [number, setNumber] = useState(1);

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

  const func2 = useCallback(() => {
    func1();
  }, []);

  const onButtonClicked = () => {
    setNumber(number + 1);
    func1();
    func2();
    console.log('');
  };

  return (
    <div>
      <div>{number}</div>
      <button onClick={onButtonClicked}>증가</button>
    </div>
  );
};

export default Test;

### 결과

## useRef와 useCallback 사용하는 경우

import React, { useState, useCallback, useRef } from 'react';

const Test = () => {
  const numberRef = useRef(0);

  const getRefNumber = useCallback(() => numberRef.current, [numberRef.current]);

  const func2 = useCallback(() => getRefNumber(), []);

  const onButtonClicked = () => {
    numberRef.current += 1;

    console.log('current number: ', numberRef.current);
    console.log('func2 number:', func2());
    console.log('');
  };

  return (
    <div>
      <button onClick={onButtonClicked}>증가</button>
    </div>
  );
};

export default Test;

### 결과

useCallback을 사용하는 것이 매 렌더링마다 같은 함수가 된다고 보장하는 것은 아니다.