리액트는 state를 변경 / 부모컴포넌트가 렌더링되는 경우 리렌더링 된다. 다시 한 번 풀어서 설명한다면 상위 state값이 변경되면 하위 컴포넌트에 넘겨주는 props가 새롭게 생성되고 props의 변경에 따라 리렌더링이 일어난다.
객체 배열 함수는 불필요한 리렌더링이 발생할 수도 있는데.. 이걸 방지하기 위해 사용하는 것이 useCallback React.memo
일단 의존성 배열effect를 수행하고 한 번만 실행하고 싶다면 두 번째 인자로 빈 배열 전달 가능하다. usecallback 의 경우 인라인 콜백과 의존성 값의 배열 이렇게 2개의 인자를 받는다.
아래 코드를 해석하면 a,b가 수정될 때에만 인라인 콜백(함수)이 새로 생성된다. 불필요한 렌더링을 줄여주는 역할(=메모리에 새로 할당되지 않고 동일 참조 값을 사용하게 된다)
const testCallback = useCallback( () => {testFn(a, b)},
//인라인 콜백 [a,b] //의존성의값)빈배열의 경우 최초에 생성된 함수를 지속적으로 기억한다.그래서 해당 컴포넌트가 렌더링 되는 최초에 한번만 생성되고 이후에는 동일한 참조값을 이용하는 것임!
인라인함수는 함수가 쓰인 곳에서 렌더링이 발생할 때마다 새로 생성.
만약에 인라인 함수가 child 컴포넌트에서 10개정도 쓰이고 있으면 child 컴포넌트 수 만큼 생성된다 .
로컬 함수는 그 함수를 가지고 있는 컴포넌트의 렌더링이 발생.
로컬 함수는 내부함수를 생성해서 child 컴포넌트에 내려주는건데, 내부함수를 감싸고 있는 함수(루트)가 리렌더 되면 내부 함수 역시 새로 생성
useMemo는 useCallback과 차이가 있다면 콜백은 함수를 반환하지만 메모는 값을 반환한다!
useCallback()useCallback(fn, deps) useMemo(() => fn, deps)는 같다
const Root = () => {
const [isClicked, setIsClicked]=useState(false);
const _onClick = useCallback(() => { setIsClicked(true);
}, []);
return(
<>
<Child onClick={_onClick}/>
<Child onClick={_onClick}/>
<Child onClick={_onClick}/>
...
</>
)};
const Child = React.memo(({onClick}) => {
return <button onClick={onClick}>Click Me!</button>
});
(얕은 비교를 통해 새로운 값인지 판단하여 리렌더링 하는데, 여기서 얕은 비교란 동일한 메모리 값을 사용하고 있는지 비교 - 좀 더 공부)
