React Rendering이 두번씩 실행되는 경우

 

React로 Page를 개발하는데, Rendering이 두번씩 실행되는 경우가 있다.

 

한참을 코드 분석해도 원인을 알수 없다가, 우연히 해결했는데... 바로

 

Strict 모드 !!

const StyledPage = () => {
  console.log('Rendering');
  return (
    <Container>
      <div className="title">
        <label className="title-label">styled-components</label>
      </div>
      <div className="content">
        <ul>
          <li>
            <RoundButton>버튼1</RoundButton>
            <RoundButton className="selected">버튼2</RoundButton>
          </li>
        </ul>
      </div>
      <div className="bg"></div>
    </Container>
  );
};
export default StyledPage;

 

console을 찍으면 두번씩 호출

 

index.js - Strict 모드 주석처리

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

 

console이 한번으로 줄었다.

 

그렇다고, Strict Mode를 사용하지 않을 순 없다.

 

StrictMode는 아래와 같은 부분에서 도움이 됩니다. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context API 검사 Ensuring reusable state React의 향후 릴리즈에서 더 많은 기능이 더해질 예정입니다.

 

※ 성능 향상 이나 Rendering 최적화를 할때는 끄고 평소에는 키고 하는것이 좋다.

 

---

https://ko.reactjs.org/docs/strict-mode.html

Strict 모드 – React