useState 관련 문의드립니다.
useEffect의 두번째 파라미터에는 useState로 인해 할당된 변수인 time만 쓸 수 있는건가요?
function TimerComponent() { const [time, setTime] = React.useState(0); const cnt = 0; React.useEffect(function() { setTime(time+1); }, [cnt]); return ( <div> <h3>{time}초</h3> <button onClick={function() { cnt++; }}>1씩 올려주세요.</button> </div> ); }
이런식으로 사용이 안되는건가요?
답변 2
1
안녕하세요, 인프런 AI 인턴이에요.
두 번째 파라미터로 넘겨준 배열이 변경되었을 경우에만 useEffect가 실행되기 때문에 [time] 배열 안에 있는 time 변수만 감지하고, 그 외의 변수는 감지하지 않습니다.
따라서, 예시로 보여주신 코드의 경우 cnt 변수도 감지할 수 있도록 배열에 추가해주셔야 합니다. 코드를 수정하면 다음과 같이 될 거에요.
function TimerComponent() {
const [time, setTime] = React.useState(0);
const cnt = 0;
React.useEffect(function() {
setTime(time+1);
}, [cnt, time]);
return (
<div>
<h3>{time}초</h3>
<button onClick={function() {
cnt++;
}}>1씩 올려주세요.</button>
</div>
);
}
이렇게 하면, cnt 변수도 변경되었을 때 useEffect가 실행되고, time 값이 업데이트됩니다.
조금 더 자세한 내용은 React 공식 문서의 “Effect Hook” 파트를 참고하시면 도움이 될 거예요. 감사합니다.
0
react에서 변경을 감지할 수 있는 변수들인 state와 props가 보통 들어가게 됩니다! useEffect 두번째 파라미터에 들어가는 변수가 변경이 됨을 감지해야 내부를 다시 실행할 수 있기 때문이죠.
만약 일반 변수를 넣게 되면 useEffect에서는 값의 변경을 감지할 수 없습니다. 실제로 값이 변경되더라도 React는 렌더링을 다시하거나 useEffect를 다시 호출하지는 않습니다!
[해결]그랩님 답변 주세요.
0
164
2
그랩님의 답변을 기다립니다/102강 전반적인 에러
0
143
2
[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.
0
126
2
[재질문][그랩님 답변 부탁드립니다]101강
0
143
2
[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문
0
98
2
Ngrok 설치 후 forwarding Url 에러
0
133
2
[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.
0
220
2
Ngrok 설치 후 forwarding Url로 연결 불가
0
137
1
그랩님,[꼭] 답변 부탁드립니다.
0
68
1
[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.
0
153
1
6강/7강 수업
0
52
1
그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.
0
99
2
그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.
0
136
2
[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
89
1
Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
130
2
일반적인 css 꾸미기에서 width와 height의 값?
0
93
2
Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법
0
196
1
그랩마켓 웹화면 구현하기 -2 질문입니다.
0
121
1
react에 반영이 되지 않습니다.
0
241
1
터미널 npm install -g create-react-app 작성 후 오류
0
421
1
create-react-app my app 실행 시 에러
0
356
2
포스트맨 질문
0
100
1
<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
0
261
2
그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.
0
479
2