useCallback 관련
236
작성한 질문수 48
안녕하세요.
useCallback 관련해서 갑자기 궁금한점이 생겨 질문 드립니다.
useCallback을 함수에 감싸고 props로 내리면 함수를 기억해서 재 성성을 하지 않는다고 이해하였습니다.
onChange 함수를 예로들면 input에 입력이 들어올때마다 함수를 실행시키게되고 state에 새로운 값을 업데이트를 할텐데요.
useCallback을 사용하였을때 새로이 함수는 생성되지 않으나 기존 함수는 계속해서 state를 업데이트를 해야되기 때문에 input이 들어올때마다 계속해서 실행된다 되지만 deps가 빈배열일 경우에는 화면에는 업데이트를 하지 않는다라고 이해하면 될까요?
깔끔하게 이해가 안되네요. 다시 한 번 밑에 이해한데로 적어보겠습니다.
1. 부모 (props:useCallback함수) --> 자식(props)로 갈 데이터가 전달 됨
2. 자식에서 함수가 실행 될 경우 자식 컴포넌트는 렌더가 되며 부모의 state 값을 업데이트 시켜줌
3. 부모가 렌더링이 다시 될 경우 useCallback으로 감싸진 함수는 재렌더링이 일어나지 않음
결국 useCallback은 부모에서 렌더링이 일어날 경우 useCallback로 감싸진 부분을 재렌더링이 일어나지 않도록 하기 위한 목적이다.
제가 이해한 것이 맞을까요? 막 쓰다보니.. 좀 길어졌는데 확인 부탁드리겠습니다.
답변 1
2
리렌더링 대상은 컴포넌트지 개별 함수가 아닙니다.
1. 부모에서 선언된 useCallback이 자식으로 전달되는 건 맞습니다.
2. 함수가 실행된다고 해서 자식이 렌더되진 않습니다. 부모의 state값을 업데이트하면서 부모 컴포넌트가 리렌더링되고, 부모가 리렌더링되면 자식 컴포넌트도 리렌더링되는 겁니다.
3. 부모 때문에 자식이 리렌더링될 때 자식 컴포넌트가 React.memo로 감싸져있는 경우, 부모로부터 전달받은 useCallback을 같은 값으로 판단해서 자식을 리렌더링시키지 않습니다.
기본 셋팅과 관련하여
0
106
1
초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법
0
109
2
focus 시에만 화면 업데이트 되는 이유 + 해결방법
0
165
2
useEffect 개수 관리
0
122
2
라이브러리 서치 방법
0
118
2
함수 정의 패턴
0
80
1
npm run dev 에러
0
156
3
npx webpack 후 에러
0
187
2
'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)
0
151
2
사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')
1
192
2
초기세팅중 packge.json 에러떠요
0
163
2
CORS - Access-Control-Allow-Origin 누락 문제
0
439
3
로그인 페이지 무한 새로고침 현상
0
608
2
Module not found: Error: Can't resolve './App' 에러
0
970
1
배포 방법
0
306
2
npm run dev 시 빌드가 매우 느려졌습니다
0
1010
2
alias 경로 설정 오류
0
462
2
fetcher 함수의 data 값이 두번 찍히는 이유
0
282
1
제네릭 질문
0
225
2
ts-node 대신 tsx 사용여부
0
377
1
배포 관련 질문
0
249
1
[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.
0
395
2
[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.
0
341
1
users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.
0
252
2





