모듈 수준에서 블록 범위 변수 사용

나는 오늘 약간의 코드 검토를 하고 있었고, 비교적 주니어 개발자의 코드를 수정하면서 "구성 요소 범위 외부에서 let을 사용하는 것은 반패턴이 되는 경향이 있습니다. 대신 구성 요소 범위 내에서 useRef 또는 useState를 사용하십시오."라는 메시지를 남겼습니다.

나는 이것이 일반적으로 사실이라고 생각하고 다른 개발자의 경우에는 확실히 사실이었습니다(이 경우 useState를 사용했어야 했습니다). 그러나 나는 그것이 전 세계적으로 사실인지 스스로에게 묻게 되었습니다. 일반적으로 React 구성 요소의 모듈 수준에서 블록 범위 변수를 사용하는 것은 안티 패턴입니까?

예

내가 말하는 내용을 보여주기 위해 다음 코드를 상상해 보십시오.

// MyComponent.js
import React, { useState } from "react";

let blockScopedVal = 0;

export default () => {
  const [myVal, setMyVal] = useState(0);

  return (
    <div>
      <button onClick={() => blockScopedVal ++)}>blockScopedVal: {blockScopedVal}</button>
      <button onClick={() => setMyVal((old) => old + 1)}>myVal: {myVal}</button>
    </div>
  );
};

이 코드에는 두 가지 기본 의미가 있습니다.

첫째, 첫 번째 버튼을 클릭해도 마치 useRef 를 사용한 것처럼 구성 요소가 다시 렌더링되지 않습니다.

예를 들어 첫 번째 버튼을 10번 클릭하면 UI에서 아무 변화도 느끼지 못하지만 두 번째 버튼을 클릭하면 첫 번째 버튼의 표시된 값이 10으로 점프하고 두 번째 버튼의 표시된 값이 1.



둘째, 둘 이상의 <MyComponent />가 있는 경우 배후에서 변수blockScopedVal를 공유합니다.

예를 들어 두 개의 MyComponent s가 있다고 가정합니다. MyComponent의 첫 번째 버튼(blockScopeVal 증분기)을 10번 클릭하면 UI에서 아무 변화도 느끼지 못하지만 두 번째 버튼을 클릭하면 첫 번째 버튼의 표시된 값이 10으로 이동하고 두 번째 버튼의 표시된 값은 1로 올바르게 증가합니다. 두 번째 값MyComponent은 여전히 ​​"blockScopedVal: 0""myVal: 0"에 있습니다. 하지만 두 번째 MyComponent 의 두 번째 버튼을 클릭하면 "blockScopedVal: 10""myVal: 1"이 됩니다. blockScopedVal 의 값은 두 인스턴스 간에 공유됩니다.

여기에서 블록 범위 변수를 사용하는 것과 useRef를 사용하는 것이 크게 다릅니다.

질문

React 구성 요소 모듈에서 블록 범위 변수를 사용하는 것이 안티 패턴입니까? 그렇다면 그 이유는 무엇입니까? 그렇지 않다면 어떤 사용 사례가 있습니까?

코드 검토 중에 let를 보았을 때 "이 작업을 수행하지 마십시오"라는 경보가 울렸으며 제시된 경우 내 직감이 완전히 옳았지만 선험적으로 이것이 확실히 반패턴인 이유를 말할 수 없었습니다. . 동일한 구성 요소의 모든 인스턴스에서 범위를 공유하고 해당 구성 요소의 인스턴스에서만 범위를 공유하려고 한다고 상상해 보십시오.

어려운 점은 훌륭한 사용 사례를 생각할 수 없다는 것입니다. 당신 중 누구라도 할 수 있습니까? 또는 반대로, 우리가 절대 이렇게 해서는 안 되는 이유를 설명할 수 있습니까?

여러분의 의견을 기다리겠습니다. 개념을 약간 가지고 놀고 싶다면 1 을(를) 만들었습니다.



... 그리고 재렌더링을 트리거하지 않는 방식으로 그렇게 합니다. 좋아, 사용 사례의 수가 내 눈앞에서 줄어들고 있는 것 같아서 여기에 도달할 수 있습니다. 하지만 여전히. 상상하다. code sandbox