React strictMode / 순수 컴포넌트

1. strictMode

React의 StrictMode는 애플리케이션에서 잠재적인 문제를 발견하기 위한 도구이다. 개발 모드에서만 활성화가 된다. 

코드 작성을 하다보고 콘솔을 해보면 두번 실행이 되는 경우가 많다. 이제 이렇게 발생되는 조건을 알아보자.

• 안전하지 않은 생명주기 메서드 
  • 예: componentWillMount, componentWillReceiveProps와 같은 메서드이다. 근데 이는 React 16이후로 사용이 권장되지 않는다. 그 이유는 클라스 컴포넌트가 아니라 함수형 컴포넌트를 많이 사용하기 때문이다.
• Deprecated API 감지
  • 오래된 API 사용을 경고한다.
• 부작용 검사
  • React 18부터 StrictMode는 개발모드에서 부작용을 감지하기 위해 헨더링을 두 번 실행한다.
  • 예를 들어, 함수형 컴포넌트에서 useEffect의 클린업이 제대로 처리되지 않거나, 순수하지 않은 함수가 문제를 일으킬 가능성을 검사한다.
• 렌더링이 두 번 실행되는 이유
  
  • 컴포넌트가 순수한지, 부작용 없이 동작하는 지 확인하려는 의도이다.
  • 이 두 번의 실행은 프로덕션에서는 발생하지 않으므로 실제 성능에 영향을 주지 않는다.

 

2. 순수 컴포넌트

strictMode에서 가장 중요한 것은 순수 컴포넌트이다. 여기서 순수 컴포넌트란

동일한 props와 state를 입력받았을 때 항상 동일한 UI를 반환하는 컴포넌트를 말한다.

• React에서는 React.PureComponent를 사용해 순수 컴포넌트를 구현할 수 있다.
• 순수 컴포넌트는 내부적으로 shouldComponentUpdate를 사용해 불필요한 렌더링을 방지한다.

순수하지 않은 컴포넌트의 예시

동일한 props와 state가 전달되었음에도 불구하고, 이전 리턴값과 다른 값을 반환한다면 순수하지 않은 컴포넌트이다.

• 부작용 존재
  • 외부 상태를 변경하거나, 전역 변수를 수정하는 경우
• 불변성을 깨뜨리는 작업
  • 배열이나 객체를 직접 변경하여 상태가 변경되지 않은 것처럼 보이는 경우
• 의존성이 명확하지 않은 함수
  • useEffect 등에서 잘못된 의존성을 설정하면 상태가 예상치 못하게 변경될 수 있다.

function NotPureComponent(props) {
	const randomValue = Math.random(); // 항상 다른 값을 리턴
		return <div>{randomValue}</div>;
}

 

순수 컴포넌트의 조건

• props와 state가 동일하면 같은 UI를 반환
• 부작용이 없어야 함 -> 외부 상태를 변경하지 말 것
• 불변성을 지킬 것 
  • 상태나 props 객체를 직접 수정하지 않고, 새로운 객체로 업데이트

3. StrictMode와 순수 컴포넌트

strictMode의 두 번 렌더링은 컴포넌트가 부작용 없이 설계되었는지 검증하기 위한 도구이다. 따라서 StrictMode에서 두 번 렌더링이 발생하더라도 동일한 결과를 반환하는 것이 순수 컴포넌트의 중요한 특성이다.