useCallback 질문
314
작성한 질문수 2
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요!! 굉장히 초보적 질문일 것 같긴 한데,,!!
14장 실습 파트를 하던 중 궁금한 점이 생겨 질문 드립니다.
const [theme, setTheme] = useState("light");
const toggleTheme = useCallback(() => {
if(theme == "light"){
setTheme("dark");
}else if (theme == "dark"){
setTheme("light");
}
}, [theme]);
저는 useCallback 함수가 의존성 배열 내의 데이터가 변경 될 때 실행된다고 이해했는데요,
위 코드는 실행 함수가 theme를 변경하는 코드인데,
theme 변경 => theme 변경하는 callback 함수실행 순서가 아니라
theme 변경하는 callback 함수 실행 => theme 변경 의 순서인것 같아서
이게 어떻게 실행되는건지 헷갈려서 질문 드립니다..!!
답변 1
0
안녕하세요, 도도도도님. 소플입니다.
말씀해주신대로 useCallback hook은 의존성 배열에 들어있는 변수들이 변경되었을 때, 함수를 재정의하기 위해서 사용합니다.
여기서 유의하셔야 할 부분은 함수를 실행하는 것이 아니라, 함수를 정의하는 것입니다.
그래서 위 코드에서 useCallback hook의 역할은 theme 값이 변경될 때마다 toggleTheme 함수를 재정의하는 것입니다.
만약 아래 코드처럼 의존성 배열을 empty array로 하게 되면, 컴포넌트가 처음 마운트 되는 시점에만 함수가 정의 되는데, 그렇게 되면 해당 함수 안에 있는 theme의 값은 초깃값으로 고정되어 있게 됩니다.
결국 toggleTheme 함수를 눌러도 실제로는 toggle이 되지 않는 현상이 발생하게 됩니다.
const toggleTheme = useCallback(() => {
if (theme == "light"){
setTheme("dark");
} else if (theme == "dark"){
setTheme("light");
}
}, []);
그래서 useCallback hook의 의존성 배열에 theme를 넣어서, useState hook에서 받은 theme의 값이 변경될 때마다 함수를 새롭게 정의해주는 것입니다.
설명이 조금 길어졌는데, 혹시 추가로 더 궁금한 점이 있으시면 또 댓글 남겨주세요!
강의가 삭제되었다고 합니다
0
135
1
이거 왜 존재하지 않는다고 뜨는건가요
0
151
1
존재하지 않는 수업이라고 떠요
0
197
1
안드로이드 에뮬레이터 오류
0
114
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
143
1
prevIsConfiromed 질문
1
156
2
chapter14 잘이해가 되지않습니다..
1
150
2
2025년 3월 리액트버전
1
218
2
npm 설치 오류
1
199
1
chapter_07 콘솔로그 질문드려요~!
1
140
2
안녕하세요 미니블로그 실습 질문드립니다.
1
192
3
에러가 떠요
1
231
3
Chapter6 질문 드립니다
1
221
2
실습 코드 있을까요?
1
219
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
250
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
323
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
151
1
버튼이 안 뜹니다
0
313
2
npx create-react-app my-app
1
479
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
388
3
Chapter_05 터미널, 리액트 에러
0
202
2
npx create-react-app my-app 명령어 반응없음
1
440
3
import 코드 에러
1
217
1
백틱
1
126
1