컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어있던 표현식(변수, 또다른 함수)도 매번 다시 선언되어 사용된다.
컴포넌트 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다.
props가 변경이 안 된 컴포넌트는 재렌더링하지 말아주세요!
Save it for later, we don't need optimization right now.
useCallback is a hook for rendering opimization. 훅은 전달된 콜백 함수를 memorization하여 반환하고, 이 함수는 의존하는 상태값이 변경된 경우에만 갱신된다.
const weight = usecallback(()=>{
setWeight(weight + 1)
}, [weight]);
const age = usecallback(()=>{
setAge(age+1)
}, [age]);
위 함수에서, weight과 age값이 변경됐을 때만 다시 함수가 생성된다(rendering)
쉽게 말해서, 그냥 함수에 useCallback을 붙이면 함수 값이 변경되기 전까지 렌더링이 안 되서 최적화가 진행된다. useMemo도 궤가 같지만 조금 더 세밀하게 최적화를 진행하기 위한 훅임