<React.StrictMode> 는 뭘까

React.StrictMode에 대해서 쓸모를 못느끼고 지우는 사람도 있다. 나는 리액트에 React.StrictMode는  왜 있는가가

궁금해서 살펴보게 되었습니다. 

 

---

[1]  React.StrictMode는 왜 있는 것일까 ? 

리액트 공식문서에서는 다음과 같이 설명을  하였습니다. 

 

StrictMode 는  개발 초기에 발생할 수 있는 버그들을 찾아줍니다. 라고 나왔습니다. 

 

 

[2] StrictMode는  리액트 코드에서는 어떤 모습일까요 

 index,js 에서  App 컴포넌트를 감싸고 있습니다. 그러면  여기에서만 쓰이는 것일까요? 

 아니요, 리액트 공식문에서는  어플리케이션의 다른 부분에서도 사용이 가능하다고 말합니다.

 

   

function App() {
  const teams = [
    { id: 0, name: "시카고볼스" },
    { id: 1, name: "밀워키벅스" },
  ];

  return (
    <>
      {teams.map((team) => (
        <TeamComponent team={team} />
      ))}
    </>
  );
}

function TeamComponent(props) {
  props.team = "크하하하";  // 읽기 전용 프로퍼티에 값 대입 

  return <></>;
}

export default App;

 

다음과 같이  컴포넌트를  두번 렌더링하여  발생할 수 있는 버그를 조기 발견합니다. 

 

 

따라서 지금까지의 내용을 정리하자면 

 

 1. React.StrictMode는  두번 렌더링하여 예상치 못한 동작이나 버그를 조기 발견하게 해준다. 

 2.  index.js뿐만 아니라 어플리케이션의 다른 부분에도  적용가능하다.