React Strict Mode란?

React Strict Mode란?

React Strict Mode는 React가 개발 중에 "내가 작성한 코드에 문제가 없는지 확인"하는 도구이다.

 

React Strice Mode가 하는 일

 

1. 컴포넌트를 두번 실행해요.

• 엄격모드는 컴포넌트를 두 번 실행해서 문제가 있는지 확인해요(캐릭터가 잘 움직이는지 확인)
• 예를 들어, "내 코드가 너무 느리지 않나?", "실수로 데이터를 잘못 계산하지는 않나?" 같은 걸 찾아줍니다.(비유: 캐릭터가 다른 환경에서도 문제없이 작동하는지 확인)

function MyComponent() {
	console.log("컴포넌트 실행!");
    return <div>안녕!</div>
}

// 엄격모드에서는 "컴포넌트 실행!"이 두번 출력됩니다.

 

2. useEffect를 다시 한 번 확인해요

• useEffect는 컴포넌트가 마운트되거나 언마운트될 때 실행하는 작업이에요.(비유: 불을 켜는 스위치라면 키고나서 잘꺼지나 확인해봅니다)
• 엄격모드는 이 작업이 잘 끝났는지 확인하기 위해 작업을 한 번 취소하고 다시 실행해 봅니다.(비유: 다시 켤 때 문제가 없는지 확인도 해요)

useEffect(() => {
	console.log("Effect 실행!");
    
    return () => {
    	console.log("Effect 정리!");
    }
});

// 엄격모드에서는 "Effect 실행!"과 "Effect 정리!"가 한 번 더 실행됩니다.

 

3. 낡은 도구를 사용하지 않는지 확인해요

• React 는 오래된 방식(구식 코드)이 아닌 새롭고 더 좋은 방식을 사용하길 원해요(비유: 새로운 스마트폰을 사용하는데, 예전 전화기를 다니고 있는 것과 비슷해요. React는 "새로운 스마트폰 기능이 더 좋아, 이걸 써봐!"라고 알려줍니다)
• 그래서 엄격 모드는 "혹시 오래된 기능을 사용하고 있지는 않은지" 검사합니다.

중요한 점: 엄격 모드는 개발 중에만 작동해요!

• 엄격모드는 개발자가 코드 문제를 찾을 수 있도록 돕는 도구에요.
• 사용자가 실제로 앱ㅇ르 사용할 때(프로덕션 모드)에서는 엄격 모드가 작동하지 않습니다.

왜 필요할까요?

• React가 자동으로 문제를 찾아주면 앱이 더 안전하고, 문제를 미리 해결할 수 있어요. 나중에 큰 문제가 되는 걸 막아주는 아주 중요한 도구랍니다!