[React] 컴포넌트가 두 번씩 호출될 때 - React StrictMode

React에서 제공하는 StrictMode는 애플리케이션에서 발생할 수 있는 문제를 자체적으로 검사하는 기능입니다.

 

StrictMode를 활성화 하면, React는 의도적으로 컴포넌트를 두 번씩 렌더링하여 발생할 수 있는 side effect를 확인합니다.

 

 

React는 렌더링과 커밋 두 단계로 동작합니다.

 

• 렌더링 단계에서는 DOM과 같은 특정 환경에 어떤 변화가 일어나야 하는 지 결정합니다. 이 때 React는 이전 렌더와 현재 렌더의 결과값을 비교합니다.
• 커밋 단계는 위의 변경 사항을 실제로 반영하는 단계입니다.

 

일반적으로 커밋단계는 렌더링 단계보다 훨씬 빠릅니다. 때문에 렌더링 단계가 병목이 되어 브라우저가 멈출 수 있는데, 이를 위해 렌더링 단계를 작은 단위로 나누어 각 단계를 중지했다가 재개하는 방식을 사용합니다.

 

이 때문에 React는 커밋 단계가 진행되기 이전에 렌더링 단계에서 같은 생명주기 메서드들을 여러번 호출할 수도 있습니다.

• constructor( )
• componentWillMount ( )  (or UNSAFE_componentWillMount ( ) )
• componentWillReceiveProps ( )  (or UNSAFE_componentWillReceiveProps ( ) )
• componentWillUpdate ( )  (or UNSAFE_componentWillUpdate ( ) )
• getDerivedStateFromProps ( )
• shouldComponentUpdate ( )
• render ( )
• setState ( )  업데이트 함수 (첫 번째 인자)

 

이로 인해 발생할 수 있는 문제를 더 쉽게 찾게 하기 위해 StrictMode는 아래 함수들을 의도적으로 두 번 호출하게 됩니다.

• constructure( ), render( ), shouldComponenetUpdate( )
• getDerivedStateFromProps( )
• 함수의 컴포넌트 바디
• setState의 첫 번째 인자
• useState, useMemo, useReducer로 호출하는 함수

 

※ StrictMode는 개발 모드에서만 활성화되기 때문에, 실제 빌드한 파일에는 영향을 주지 않습니다!

 

더 자세한 정보는 아래 공식 문서에서 확인할 수 있습니다.

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

Strict 모드 – React