Strict 모드

Strict 모드

StirctMode는 애플리케이션 내 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 부가적인 검사와 경고를 활성화합니다.

StrictMode는 dv에서만 활성화됩니다.

아래와 같은 코드로 활성화 할 수 있습니다.

function ExampleApplication(){
	return (
		<div>
			<React.StrictMode>
				...
			</React.StrictMode>
		</div>
	)
}

StrictMode는 다음에서 도움이 됩니다.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 Ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사
• Ensuring reusable state

안전하지 않은 생명주기를 사용하는 컴포넌트 발견

비동기 React 애플리케이션에서 몇몇 생명주기 메서드들은 안전하지 않습니다. 또한 서드 파티 라이브러리들에 이러한 것들이 포함되어 있을 수 있어 이를 사용할 수도 있습니다.

Strict 모드가 활성화 되면, React는 해당 메서드들의 목록을 정리해 경고를 띄워줍니다.

레거시 문자열 Ref 사용에 대한 경고

문자열 Ref는 사용하기 더 편리하지만 문제점들이 발생했습니다. 그래서 콜백 형태를 권장하고 있습니다. 여기에 createRef가 추가되어 기존 레거시들에 대해서 경고를 발생시키고 있습니다.

권장되지 않은 findDOMNode 사용에 대한 경고

findDOMNode는 DOM노드에 Ref를 바로 지정가능하기 때문에 보통 필요하지 않습니다. 추가적으로 추상화 레벨을 무너지게 하고, 이것이 리팩토링을 어렵게 만들어 사용을 하는것을 권하지 않습니다.

예상치 못한 부작용 검사

리엑트는 2단계로 동작합니다.

• 렌더링 단계 → 어떤 변화가 필요한지 결정하는 단계
• 커밋 단계 → 변경 사항을 반영하여 생명주기 메서드를 호출

렌더링 단계에서 생명주기 메서드들이 여러 번 호출될 경우 메모리 누수, 잘못된 동작 등을 발생시킬 수 있습니다. StrictMode가 자동으로 부작용을 찾아주는 것은 불가능하지만 예측 가능하도록 도와 줄 수는 있습니다. 아래 함수들을 의도적으로 이중으로 호출하여 찾는 방법을 사용합니다.

• class Component의 constructor, Render, 그리고 sholudComponentUpdate 메서드
• class Component의 getDerivedStateFromProps
• 함수 컴포넌트 바디
• State updater 함수(setState 첫번째 인자)
• useState, useMemo 그리고 useReducer에 전달되는 함수

class TopLevelRoute extends React.Component {
	constructor(props){
		super(props);

		SharedApplicationState.recordEvent('ExampleComponent');
	}
}

얼핏 보았을 때 이 코드에는 문제가 없어보이지만 sharedApplicationState.recordEvent의 결과가 매번 달라진다면 여러번 인스턴스화 했을 때 애플리케이션에서 오류를 발생시킬 수 있습니다. 이러한 이해하기 어려운 버그들을 strictNode는 의도적으로 두 번 호출하여 이러한 것들을 찾아냅니다.

레거시 context API 검사

레거시 context API는 오류를 발생시키기 쉬워 이후 릴리즈에서 삭제될 예정입니다. 따라서 에러를 띄워줍니다.

Ensuring Reusable State

앞으로 리엑트가 상태를 유지하면서 UI 섹션을 추가 제거 하는 기능을 추가하려고 합니다. 화면이 변할 때 마운트 해제전에 사용된 것과 동일한 것을 사용할 시 트리에 다시 마운트 되도록 지원합니다.

이를 통해 성능향상이 될 수 있지만, 일부에 삭제 콜백이 제대로 정리되지 않을 수 있습니다. 따라서 React18에서 새로운 전용검사를 도입하여 모든 구성요소를 자동으로 마운트 해제하고 다시마운트하여 두번째 마운트에 이전 상태를 복원합니다.

strictMode는 컴포넌트가 언마운트되고 리마운트되는것을 시뮬레이트해봄으로 이를 테스트합니다.