inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

처음 만난 리액트(React)

컴포넌트 렌더링 과정이 궁금합니다.

해결된 질문

455

OnlyOne

작성한 질문수 1

1

안녕하세요 선생님 Char 7 실습 코드를 localhost:3000 포트에서 처음 랜더링 했을 때 그림과 같이 useEffect() 각각 2번씩 (총4번)호출되어 질문드립니다.

질문.png코드는 다음과 같습니다. 각각 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;

 

HTML/CSS javascript react

답변 1

0

Inje Lee (소플)

안녕하세요, 소플입니다.

개발모드에서 렌더링이 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

 

감사합니다.

1

OnlyOne

완전 감사합니다!!

강의가 삭제되었다고 합니다

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