인프런 커뮤니티 질문&답변

안녕하세요.

useCallback 관련해서 갑자기 궁금한점이 생겨 질문 드립니다.

useCallback을 함수에 감싸고 props로 내리면 함수를 기억해서 재 성성을 하지 않는다고 이해하였습니다.

onChange 함수를 예로들면 input에 입력이 들어올때마다 함수를 실행시키게되고 state에 새로운 값을 업데이트를 할텐데요.

useCallback을 사용하였을때 새로이 함수는 생성되지 않으나 기존 함수는 계속해서 state를 업데이트를 해야되기 때문에 input이 들어올때마다 계속해서 실행된다 되지만 deps가 빈배열일 경우에는 화면에는 업데이트를 하지 않는다라고 이해하면 될까요?

깔끔하게 이해가 안되네요. 다시 한 번 밑에 이해한데로 적어보겠습니다.

1. 부모 (props:useCallback함수) --> 자식(props)로 갈 데이터가 전달 됨

2. 자식에서 함수가 실행 될 경우 자식 컴포넌트는 렌더가 되며 부모의 state 값을 업데이트 시켜줌

3. 부모가 렌더링이 다시 될 경우 useCallback으로 감싸진 함수는 재렌더링이 일어나지 않음

결국 useCallback은 부모에서 렌더링이 일어날 경우 useCallback로 감싸진 부분을 재렌더링이 일어나지 않도록 하기 위한 목적이다.

제가 이해한 것이 맞을까요? 막 쓰다보니.. 좀 길어졌는데 확인 부탁드리겠습니다.