React 공식문서 -<StrictMode>

- <StrictMode>를 사용하면 개발 중에 컴포넌트에서 흔히 발생하는 버그를 조기에 발견할 수 있다.

- Strict Mode는 다음과 같은 개발 전용 동작을 활성화한다.

1. 불완전한 렌더링으로 인한 버그를 찾기 위해 한 번 더 렌더링한다.

2. Effect 클린업이 누락되어 발생한 버그를 찾기위해 Effect를 한 번 더 실행한다.

 

- 전체 앱에 Strict Mode를 사용하려면 렌더링할 때 루트 컴포넌트를 <StrictMode>로 감싼다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

- 만약 앱의 일부분에서 Strict Mode를 사용하려면 해당 컴포넌트만을 <StrictMode>로 감쌀 수 있다.

---

Fixing bugs found by double rendering in development(개발환경에서 이중 렌더링으로 발견되 버그 수정하기)

- React는 작성하는 모든 컴포넌트가 순수한 함수라고 가정한다. 즉, 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 한다.

- Strictk Mode는 개발 환경에서 실수로 작성한 불순한 코드를 찾을 수 있도록 다음의 일부 함수를 두 번 호출한다.

1. useState, set 함수, useMemo, useReducer에 전달한 함수

2. constructor, render, shouldComponentUpdate와 같은 일부 클래스 컴포넌트 메서드

 

// App.js
import { useState } from 'react';
import StoryTray from './StoryTray.js';

let initialStories = [
  {id: 0, label: "Ankit's Story" },
  {id: 1, label: "Taylor's Story" },
];

export default function App() {
  let [stories, setStories] = useState(initialStories)
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        textAlign: 'center',
      }}
    >
      <StoryTray stories={stories} />
    </div>
  );
}

// StoryTray.js
export default function StoryTray({ stories }) {
  const items = stories;
  items.push({ id: 'create', label: 'Create Story' });
  return (
    <ul>
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

- 위 예제의 초기 렌더링 시에는 문제가 없는 것처럼 보이지만, Strict Mode를 사용하면 Creact Story라는 li 태그가 두 개가 생성된 것을 확인할 수 있다.

- 이는 stories와 item이 동일한 메모리 주소를 가리키고 있기 때문이다.

- 이를 해결하기 위해서는 StoryTray 컴포넌트에서 stories prop을 복사해서 사용하는 방법이 있다. 이렇게 하면 StoryTray 함수가 순수해진다.

export default function StoryTray({ stories }) {  
  const items = stories.slice(); // Clone the array
  items.push({ id: 'create', label: 'Create Story' });
  return (
    <ul>
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

- second-Hand 지역설정에서 사용할 것(드롭다운 부분)

---

Fixing bugs found by re-running Effects in development(개발 환경에서 Effect를 재실행하여 발견된 버그 수정하기)

- Strict Mode가 커져있으면 React는 개발 환경에서 모든 Effect에 대해 셋업 + 클린업 사이클을 한 번 더 실행합니다.

- Strict Mode가 없으면, Effect에 클린업이 필요하다는 사실을 놓치기 쉽다.

- Strict Mode를 통해 개발 단계에서 Effect에 대해 셋업만 하는 대신 셋업 -> 클린업 -> 셋업을 순차로 실행함으로써 누락된 클린업 로직이 있음을 알 수 있다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)