[ React ] 콘솔 창에 로그가 두번 찍히는 문제 해결

현상

컴포넌트 동작을 확인하기 위해 출력코드를 입력했다. 렌더링을 할 때마다 콘솔 창에 로그가 2번 찍혔다.  2번 호출 한 것도 아닌데 로그가 2번 이상 찍히는 게 이상했다.

코드는 다음과 같다.

import { useState, useEffect } from "react";

function Hello() {
    function hiFn() {
        console.log("Hi :)");
        return byFn;
    }
    function byFn() {
        console.log("Bye :(");
    }
    useEffect(hiFn, []);
    return <h1>Hello</h1>;
}

function App() {
    const [showing, setShowing] = useState(false);
    const onClick = () => {
        setShowing((prev) => !prev);
    };
    return (
        <div>
            {showing ? <Hello /> : null}
            <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
        </div>
    );
}

export default App;

버튼을 클릭하면 Hello 컴포넌트를 생성하고 다시 클릭하면 파괴하는 클린업 함수였다. 컴포넌트를 없앨 때는 함수는 제대로 동작을 했는데 컴포넌트를 생성할 때는 한번 생성 후 다시 파괴 한 후 생성하는 과정이었다. 생성만 하면 될 것을 다시 파괴하고 생성하는 과정이 있는게 이해가 되지 않았다.

 

문제의 원인

CRA로 개발을 할 때 index.js에서는 <App /> 을 <React.StrictMode>로 감싼다. 개발 단계에서 사용하는 문법으로 StrictMode는 컴포넌트들을 의도적으로 마운팅, 언마운팅, 리마운팅 과정을 거치게 한다. 잠재적인 부수효과를 파악하고 클린업 함수들이 제대로 구현되었는지 확인하기 위함이다.

 

해결방법

index.js에서 <React.StrictMode>을 주석치자.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    // <React.StrictMode>
    <App />
    // </React.StrictMode>
);