useState의 이중 렌더링 이해

React에서 useState 후크는 일반적으로 구성 요소 상태를 관리하는 데 사용됩니다. 그러나 특정 조건에서는 useState로 렌더링된 구성 요소가 각 상태 업데이트에 대해 두 번 렌더링되는 것을 볼 수 있습니다. 이 동작은 엄격 모드를 활성화하지 않은 많은 개발자를 혼란스럽게 했습니다. 왜 이런 일이 발생합니까?

엄격 모드의 역할

엄격 모드가 활성화되지 않았다는 가정과 달리, 코드는 실제로 제약 조건 하에서 실행됩니다. 기본적으로 최신 버전의 React는 암시적으로 요소의 가장 바깥쪽 구성 요소를 래핑합니다. 이 모드는 디버깅을 강화하고 잠재적인 성능 문제를 강조합니다.

엄격 모드에서 이중 함수 호출

React의 문서에는 엄격 모드가 의도적으로 특정 함수를 "이중 호출"한다고 명시되어 있습니다. setState 및 useState에 전달된 상태 업데이트 함수를 포함합니다. 이는 코드에서 setNumber를 호출할 때마다 두 번 호출된다는 의미입니다.

이중 호출의 결과

이 이중 호출로 인해 구성 요소가 두 번 렌더링됩니다. 이 동작은 개발자가 보다 결정적으로 만들어 잠재적인 부작용을 발견하는 데 도움을 주기 위한 것입니다. 기본적으로 React는 useState 후크를 사용할 때 업데이트를 연기합니다. 그러나 엄격 모드는 이 동작을 우회하여 렌더링이 두 번 발생하게 만듭니다.

결론

요약하자면, useState를 사용하는 구성 요소의 이중 렌더링은 React의 Strict 모드에서 코드를 작성하세요. 예상치 못한 것처럼 보일 수도 있지만 이 동작은 의도적인 것이며 부작용을 더욱 분명하게 하여 디버깅 기능을 향상시키도록 설계되었습니다.