[Q] Ch20: React의 strict mode와 JS의 strict mode의 차이점과 React 컴포넌트 함수의 순수성

[JeongHeonK]

Questions

관련 이슈: null

페이지: P20

---

20장 JS의 strict mode를 공부하다 보니 의문이 생겨 질문드립니다.

react에서도 strict mode가 있습니다.
여기서 사용하는 strict모드는 추가로 렌더링을 한번 더 발생시킵니다.
그래서 다음과 같은 검사를 진행합니다.

• 순수하지 않은 렌더링으로 인해 발생하는 버그 검사
• Effect 클린업이 누락되어 발생하는 버그 탐색
• 더 이상 사용되지 않는 API의 사용 여부를 확인.

이를 통해 React는 컴포넌트를 순수함수로 유지하려고 합니다.

---

1. 이 목적으로 사용되는 React의 strict mode와 js의 strict mode의 차이점이 궁금합니다.
2. 왜 React는 컴포넌트를 순수함수로 유지하려고 하는지도 궁금합니다.

---

참조

• 공식 문서- React의 Strict Mode
• 공식 문서- React의 side effect

[siwon99]

React의 Strict Mode와 JavaScript의 Strict Mode의 차이점

• React strict Mode는 리액트 컴포넌트를 엄격하게 관리, 불필요한 부작용을 방지하고 성능 최적화에 중점을 둡니다. 그리고 리액트 컴포넌트에서만 적용되며 특히 렌더링과 관련된 문제를 검출합니다.

• JS Strict Mode는 자바스크립트 코드 자체를 더 엄격하게 관리하고 잠재적인 오류를 예방, 보안 강화하는데 중점을 둡니다. 모든 자바스크립트 코드에 적용, 코딩 스타일과 관련된 오류를 방지합니다.

React가 컴포넌트를 순수함수로 유지하는 이유

• 순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하는데, 이는 리액트 상태 관리와 재조정 과정이 더 효율적이고 안정적으로 수행 가능하기 때문입니다. 즉, 애플리케이션의 유지 보수성과 테스트 용이성, 성능 최적화에 큰 도움이 되기 때문에 리액트가 컴포넌트를 순수 함수로 유지합니다.

[SoMin-Yoo]

1. JavaScript의 Strict Mode가 JavaScript 언어 자체의 코드 품질을 개선하는 데 중점을 둔 기능이라면 React의 Strict Mode는 React 애플리케이션에서 잠재적인 문제를 조기에 감지하고 개선하기 위한 개발 도구라는 차이가 있습니다.

2. 컴포넌트는 순수해야 합니다.

   (1) 컴포넌트는 자신의 일에만 신경을 써야합니다.
   렌더링하기 전에 존재했던 어떤 물체나 변수도 바꾸어서는 안 됩니다.

   (2) 동일한 입력, 동일한 출력.
   동일한 입력이 주어지면 컴포넌트는 항상 동일한 JSX를 반환해야 합니다.

참조

https://react.dev/learn/keeping-components-pure