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

트릴님의 프로필 이미지
트릴

작성한 질문수

웹 게임을 만들며 배우는 React

2-2. Class와 Hooks 비교하기

렌더링 될 때마다 함수 새로 그려지는데 한 번 선언하고 계속 쓰면 안되는건가요:?

작성

·

155

0

 함수가 새로 그려지는게 useCallback 콜백 매개변수로 특정 값이 바뀔때마다 함수가 새로그려지는걸로 알 고 있습니다. 근데 예전부터 궁금했는데 한 번 그려놓은 함수를 계속 사용하면 되는거아닌가요? 왜 특정 값이 바뀔때마다 useCallback을 해서 새로 그려야 되는건가요? 그냥 [] 빈 배열 값 넣고 시작, 끝일때 실행되게 하면 문법상 에러인가요?

답변 2

2

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

const [name, setName] = useState('zerocho');

const onClick = useCallback(() => {
  console.log(name);
}, []);

이렇게 빈 배열만 넣은 경우에는

setName('nero'); 로 name을 변경할 때

console.log(name)이 여전히 zerocho로 나오게 됩니다.

이것을 nero로 나오게 수정하려면

const onClick = useCallback(() => {
  console.log(name);
}, [name]);

을 넣어야 합니다.

0

트릴님의 프로필 이미지
트릴
질문자

함수를 새로 그리지 않으면 state값이 업데이트가 되지 않는거군요...  그럼 

const onClick = useCallback(() => {
  console.log(name);
}, []);

은 영원히  'zerocho' 값이군요...

전 onClick 이벤트를 하는 버튼이 함수를 호출하면 값이 바뀔거라고 생각하고 한 번만 선언하면 되지 않나 생각했는데.. 잘못생각했었네요..

트릴님의 프로필 이미지
트릴

작성한 질문수

질문하기