[React] useCallback : 함수 자체 memoization

❓ 인자로 들어오는 함수 자체를 기억(메모이제이션)한다!!

(React.memo : 컴포넌트를 메모이제이션)

 

 

버튼을 눌러 숫자를 늘리거나 줄이고 초기화 누르면 0으로 다시 초기화된다.

전 편을 보면 React.memo로 메모이제션해서 +, - 버튼을 눌러도 리렌더링이 되지 않았는데

여기에서는 React.memo를 해도 리렌더링이 된다.

➡️ 함수형 컴포넌트를 사용했기 때문이다.

 

 

App.jsx에 state를 사용하고 있기 때문에 거기에 초기화 함수를 작성하고,

Box1.jsx에 props를 내려 초기화 기능을 가져왔다.

//App.jsx

const [count, setCounst] = useState(0);
.
.
// count를 초기화해주는 함수
const initCount = () => {
	setCount(0);
}

//-------------------------------------------------------

// Box1.jsx

// props로 내려받기
function Box1(){
	console.log("Box1 컴포넌트가 렌더링되었다!!");
    return(
    	<button
        	onClick={()=>{
            	initCount();
            }}
            >
        	초기화
        </button>
    );
}

 

 

 

App.jsx는 함수형 컴포넌트이다.

렌더링이 될 때마다 작성한 초기화 함수는 새로운 공간에 새로운 주소값을 저장한다.

그렇기에 Box.jsx에 props로 받은 값도 새로운 값이라고 인식하여 다시 렌더링을 하게 되는 것이다.

 

➡️ 이럴 때 useCallback!!! 으로 함수 자체를 메모이제이션을 한다.

 

---

사용

// App.jsx

const initCount = useCallback(() => {
	setCount(0);
},[]);

 

이제 + , - 버튼을 눌러도 박스는 리렌더링되지 않는다.