<p>App.js와 각 하위 컴포넌트에 콘솔로그를 찍어보니</p>
<p>두 번씩 호출되는 현상이 발생하는데</p>
<p>이유를 모르겠습니다..&nbsp;</p>

<p>index.js를 보면 React.StrictMode 가 있을텐데 해당부분을 없애면 한번만 호출됩니다.</p>
<p>ex)</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;"><br />
<div><span style="color: #9cdcfe;">ReactDOM</span>.<span style="color: #dcdcaa;">render</span>(</div>
<div>&nbsp;&nbsp;<span style="color: #6a9955;">//&lt;React.StrictMode&gt;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #4ec9b0;">App</span>&nbsp;<span style="color: #808080;">/&gt;</span>,</div>
<div>&nbsp;&nbsp;<span style="color: #6a9955;">//&lt;/React.StrictMode&gt;,</span></div>
<div>&nbsp;&nbsp;<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">'root'</span>)</div>
<div>);</div>
</div>

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

컴포넌트 두 번씩 호출