React실행시키면 2번씩 실행되는 모습을 보았는데 오늘은 개념정리가 하기싫어 검색을 해보았다!
그 이유는 바로바로!
Strict Mode때문!
한줄요약
: strict mode가 렌더링 단계 메서드가 여러번 호출될 때side-effect를 자동으로 찾아주는 것은 어려우나 의도적으로 함수를 이중호출하여 문제가 되는 부분을 발견할 수 있게 도와주는 것이다
root에서 redner할때 strictMode로 감싸져있으며 strict mode는 개발모드에서만 활성화 된다.
StrictMode란?
- 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구
- Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화
- Strict 모드는
개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
- Ensuring reusable state위의 코드 중 2번씩 랜더링 되는 이유는 예상치 못한 부작용 검사에 해당된다.
- 개념적으로 React는 랜더링, 커밋 두단계로 동작
- 랜더링은 DOM과 같은 특정환경에 어떤 변화가 필요한지 결정하는단계이며 이 과정에서 render를 호출하여 이전 렌더와 비교
- 커밋은 React가 변경사항을 저장하는 단계(React DOM의 경우 React가 DOM 노드를 추가, 변경 및 제거하는 단계). 이 단계에서 React는 componentDidMount나 componentDidUpdate와 같은 생명주기 메서드 호출
- 랜더링 단계 생명주기 메서드(클래스 컴포넌트 메서드 포함)
constructor
componentWillMount (or UNSAFE_componentWillMount)
componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
componentWillUpdate (or UNSAFE_componentWillUpdate)
getDerivedStateFromProps
shouldComponentUpdate
render
setState 업데이트 함수 (첫 번째 인자)- 위의 메서드는 여러번 호출 될 수 있기 때문에 side-effet를 포함하지 않는 것이 중요하며 memory leaks와 invalid application state등 다향한 문제가 발생할 수 있음. 이러한 문제들은 예측할대로 동작하지않아 발견하기 어려울 수 있음
- Strict 모드가 side-effect를 자동으로 찾아주는건 어려우나 의도적으로 함수를 이중호출하여 예측하게끔 만들어 문제가 되는 부분을 발견할 수 있게 도와준다
의도적으로 이중호출하는 함수(개발모드에서만 적용)
- 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
- 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
- 함수 컴포넌트 바디
- State updater 함수 (setState의 첫 번째 인자)
- useState, useMemo 그리고 useReducer에 전달되는 함수참고 : react문서
오류 방지를 위해 이중호출을 해주는 Strict모드 그동안 왜 두번씩 랜더링 되는거지 ㅇㅂㅇ 라는 생각만 가지고 있다가 이렇게 정리를 하고 나니 개운(편안)해졌다. 이제는 두번씩떠도 당황하지않고 Strict모드야 고맙다~를 외칠수있겠다.
