- React
react.dev
코드 오류를 사전에 차단하는 React Strict 모드 이해하기
JavaScript에는 'use strict' 구문을 사용하여 코드를 보다 엄격하게 검사할 수 있는 "엄격 모드"가 있습니다. 마찬가지로, React에는 잠재적 문제를 식별하는 데 도움을 주는 React Strict 모드가 있는데요. Next.js와 같은 프레임워크에서도 설정 파일을 통해 이 모드를 활성화할 수 있으며, 사용을 강력히 권장하고 있습니다.
React Strict 모드란 무엇일까요?
추가적인 렌더링을 실행하여 렌더링 관련 버그를 식별합니다.
useEffect를 두 번 실행하여 클린업 함수 누락과 같은 버그를 찾아냅니다.사용되지 않는(deprecated) API의 사용을 감지합니다.
React는함수형 프로그래밍 패러다임을 활용하여 컴포넌트를 구성하기 때문에 순수 함수처럼 동작하기를 기대합니다. 즉, 동일한 입력(props, state)에 대해 항상 동일한 JSX를 반환해야 하는데요. 이 규칙을 위반하면 예상치 못한 동작과 버그가 발생할 수 있습니다. Strict 모드는 이러한 순수하지 않은 코드를 식별하기 위해 일부 함수를 두 번 호출합니다. 함수가 순수하다면 두 번 호출하더라도 렌더링 결과는 동일하기 때문인데요. 이중 호출 대상에는 다음이 포함됩니다:
컴포넌트 함수 본문(함수 컴포넌트 전체)
useState,setFunctions(setState함수),useMemo
이중 호출은 사이드 이펙트를 포함할 수 있는 코드가 순수 함수의 기대를 충족하는지 확인하기 위해 수행됩니다. Strict 모드가 아닌 경우, 추가적인 렌더링이 발생할 때까지 버그를 간과하기 쉽습니다.
개발 모드에서 이러한 두 번째 렌더링을 비활성화하고 싶다면, React DevTools 확장 프로그램에는 이를 억제할 수 있는 설정이 포함되어 있습니다. 이를 통해 개발자는 필요에 따라 Strict 모드의 이중 렌더링을 조절할 수 있습니다.
https://react.dev/reference/react/StrictMode
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 3월 3일 오전 1:48
댓글 0
함께 읽은 게시물
AI(LLM) 애플리케이션의 발전 속도가 AI 지능(능력)의 발전 속도를 따라가지 못하고 있는 상태가 되었다. 즉, 이제 AI가 부족한 것이 문제가 아니라, AI의 능력을 100% 활용하지 못하고 있는 것이 문제인 상태가 되었다는 이야기.
ChatGPT 버전명 설명
ChatGPT 사용할 때 어떤 모델을 선택해야할지 망설여집니다. 모델명만 봐서는 어떤게 좋은지 모르겠더라고요.
... 더 보기직장인으로서 10년 정도 일하게 되면 피할 수 없는 순간이 바로 조직에서 리더의 역할을 받게 되는 인사발령이다. 팀원이었을 때는 내게 주어진 업무를 내가 가진 능력과 주변 동료들의 도움으로 해결하고, 그에 합당한 평가와 보상을 기다리며, 나쁘지 않는 리워드와 내 위치에 안도하며 또 새해를 맞이하고 하루하루를 버텨나가는 과정에 큰 어려움이 없다.
... 더 보기-
하나부터 열까지 리더가 상세히 설명해 주기를 바라는 구성원이 있습니다. 반대로 큰 얼개만 듣고 나머지는 자율적으로 하고 싶어 하는 경우도 있죠. 회식에 참여하는 것을 너무나 힘겨워 하는 구성원이 있는 반면, 동료들과 함께 시간을 보내며 가까워지는 것을 원하는 구성원도 있습니다.
... 더 보기
GraphRAG 에 대한 생각
2000년 초반부터 온톨로지 연구를 해왔고, 관심을 갖고 있는 사람으로서 GraphRAG 에 대해 갖고 있는 생각을 적어봤습니다.
... 더 보기
