컴포넌트 렌더링 과정이 궁금합니다.
안녕하세요 선생님 Char 7 실습 코드를 localhost:3000 포트에서 처음 랜더링 했을 때 그림과 같이 useEffect() 각각 2번씩 (총4번)호출되어 질문드립니다.
코드는 다음과 같습니다. 각각 1번씩 호출되지 않고 2번씩 호출되는 이유가 뭘까요.. ㅠ
import React, {useState, useEffect} from "react";
import useCounter from "./useCounter";
const MAX_CAPACITY = 10;
function Accommodate(props){
const [isFull, setIsFull] = useState(false);
const [count, increaseCount, decreaseCount] = useCounter(0);
useEffect(() => {
console.log("============");
console.log("useEffect() is called.");
console.log(`isFull : ${isFull}`);
});
useEffect(() => {
setIsFull(count >= MAX_CAPACITY);
console.log(`Current count value: ${count}`);
}, [count]);
return (
<div style={{padding : 16}}>
<p>{`총 ${count}명 수용했습니다.`}</p>
<button onClick={increaseCount} disabled={isFull}>
입장
</button>
<button onClick={decreaseCount}>
퇴장
</button>
{isFull && <p style={{color: "red"}}>정원이 가득찼습니다.</p>}
</div>
)
}
export default Accommodate;
답변 1
0
안녕하세요, 소플입니다.
개발모드에서 렌더링이 2번 되는 이유는 StrictMode 때문입니다.
렌더링이 1번만 되도록 테스트하려면 index.js에서 강제로 StrictMode를 제거하고 실행해보시면 됩니다.
StrictMode에 대한 자세한 설명은 아래 링크에 있는 답변을 참고하시기 바랍니다!
https://www.frontoverflow.com/question/19/React.StrictMode%EB%8A%94%20%EB%AD%94%EA%B0%80%EC%9A%94%3F
감사합니다.
강의가 삭제되었다고 합니다
0
109
1
이거 왜 존재하지 않는다고 뜨는건가요
0
136
1
존재하지 않는 수업이라고 떠요
0
184
1
안드로이드 에뮬레이터 오류
0
100
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
128
1
prevIsConfiromed 질문
1
142
2
chapter14 잘이해가 되지않습니다..
1
136
2
2025년 3월 리액트버전
1
204
2
npm 설치 오류
1
178
1
chapter_07 콘솔로그 질문드려요~!
1
128
2
안녕하세요 미니블로그 실습 질문드립니다.
1
179
3
에러가 떠요
1
219
3
Chapter6 질문 드립니다
1
210
2
실습 코드 있을까요?
1
207
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
233
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
308
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
142
1
버튼이 안 뜹니다
0
305
2
npx create-react-app my-app
1
471
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
377
3
Chapter_05 터미널, 리액트 에러
0
194
2
npx create-react-app my-app 명령어 반응없음
1
433
3
import 코드 에러
1
215
1
백틱
1
122
1





