-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
useCallback 질문
22.10.26 11:24 작성 조회수 182
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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 변경 의 순서인것 같아서
이게 어떻게 실행되는건지 헷갈려서 질문 드립니다..!!
답변을 작성해보세요.
0
Inje Lee (소플)
지식공유자2022.10.26
안녕하세요, 도도도도님. 소플입니다.
말씀해주신대로 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의 값이 변경될 때마다 함수를 새롭게 정의해주는 것입니다.
설명이 조금 길어졌는데, 혹시 추가로 더 궁금한 점이 있으시면 또 댓글 남겨주세요!
답변 1