유한 상태기를 사용하여 전방 사용자 흐름을 간소화하다

전방의 이벤트 흐름을 제어하는 것은 간단한 작업인 것 같지만, 조율과 제어가 필요한 요소가 갈수록 많아지면서 더욱 도전적으로 변한다.본고에서 나는 통일된 상태 저장소를 사용하여 여러 대상을 동시에 통제하는 최선의 실천에 대해 토론할 것이다.이 기술은 유한상태기라고 불리며, 백엔드 코드와 자주 사용된다. 왜냐하면 프로그램이 완전히 금지된 상태 조합에 들어가지 않도록 함으로써 모든 종류의 오류를 제거할 수 있기 때문이다.
나는 내가 방금 발표한 Source Compare이라는 응용 프로그램 개발 홈페이지에 통일된 상태를 저장하는 것이 매우 유용하다는 것을 발견했다. 이 응용 프로그램은 팀의 사람들이 버전 제어 이미지를 사용하여 모든 사람을 같은 페이지에 유지하도록 허용한다.
위 링크의 홈 페이지를 보면 프로그램의 작업 방식에 17개의 다른 요소가 있고 사용자가 멈추는 단계에 따라 표시하거나 숨기거나 어둡게 할 수 있습니다.조합하면 약 50가지 가능한 상태가 생길 수 있지만 여기서는 6가지만 보여주고 싶어요.처음에, 나는 몇몇 정지 이벤트에 다른 원소의 상태를 설정하려고 시도했지만, 통제해야 할 원소의 수가 증가함에 따라, 이것은 곧 미친 듯이 변했다.
이 문서에서 우리는 먼저 우리가 해결하고자 하는 실제 문제를 더욱 상세하게 토론한 다음에 통일된 상태 저장소를 어떻게 사용하는지 토론할 것이다.간단한 정지 사건부터 시작합시다.우리는 React와 Tailwind을 사용할 것입니다. 그러나 Tailwind는 hover:opacity-50 유형 클래스에 정지 지원을 내장해서 상태를 클래스 설정이 아니라 변수에 저장할 수 있다는 사실을 무시할 것입니다.
이 점을 고려하면 서스펜딩 이벤트가 있는 간단한 이미지는 다음과 같습니다.

export const OneIcon = () => {
  const [hoverState, setHoverState] = useState(false)

  return (
    <img
      src="path/to/image.jpg"
      onMouseEnter={() => setHoverState(true)}
      onMouseLeave={() => setHoverState(false)}
      className={`${hoverState ? 'opacity-100' : 'opacity-50'}`}
    />
  )
}

이 사진은 우리가 그림 위에 걸었을 때 불투명도가 어떻게 증가했는지 보여 준다.이 구성 요소는 onMouseEnter과 onMouseLeave을 사용하여 사람이 언제 이미지에 멈추는지 측정하고, 우리는 그에 상응하여 정지 상태를true 또는false로 설정할 것입니다.그리고 수업 시간에 우리는 hoverState 변수에 따라 필요한 불투명도를 설정할 것이다.이제 복잡성을 극대화하고 싶다고 가정해 봅시다.

여기, 우리는 두 가지 절차와 두 개의 아이콘이 있다.두 단계 위에 마우스 커서를 놓으면 두 이미지의 불투명도가 50%로 설정됩니다.1단계 위로 마우스를 가져가면 이미지 1의 불투명도가 100%가 되고 이미지 2는 50이 됩니다.그런 다음 마우스 커서를 2단계로 이동하면 두 이미지의 불투명도가 뒤집힙니다.
2단계 2미러 시스템에 대한 react 코드를 만듭니다.

// Bad- don't do it this way!
export const IconSet = () => {
  const [hoverState1, setHoverState1] = useState(false);
  const [hoverState2, setHoverState2] = useState(false);


  return (
    <span
        onMouseEnter={() => {
            setHoverState1(true)
            setHoverState2(false)
        }}
        onMouseLeave={() => {
            setHoverState1(false)
            setHoverState2(false)
        }}
    >
        1
    </span>
    <span
        onMouseEnter={() => {
            setHoverState1(false)
            setHoverState2(true)
        }}
        onMouseLeave={() => {
            setHoverState1(false)
            setHoverState2(false)
        }}
    >
        2
    </span>
    <img
      src="path/to/image1.jpg"
      className={`${hoverState1 ? 'opacity-100' : 'opacity-50'}`}
    />
    <img
      src="path/to/image2.jpg"
      className={`${hoverState2 ? 'opacity-100' : 'opacity-50'}`}
    />
  );
};

이것은 작용할 수 있지만 이상적이지는 않습니다. 우리는 <img>마다 단독 setstate 호출을 해야 합니다. onMouse 이벤트마다 일련의 취약한 setstate 호출이 있습니다. 이벤트의 행동을 바꾸려면 해당하는 처리 프로그램에서 변경해야 하기 때문입니다.이것은 마우스를 떠날 때 의외로 마우스 정지 상태를true로 설정하여 처리 프로그램 간에 분쟁을 일으키면 오류 도입이 너무 쉽다는 것을 의미합니다.
모든 이미지와 트리거 사이에서 공유되는 상태를 만들면 코드의 선명도를 높이고 의외의 상태 조합을 없앨 수 있습니다.그림 2의 상태와 일치하도록 세 가지 상태를 정의합니다.

마우스는 1단계 또는 2단계 위로 이동하지 않습니다.

마우스가 1단계 위로 이동합니다.

마우스가 2단계 위로 이동합니다.

시스템의 모든 유한 상태에 대해 우리는 모든 이미지에 국부 상태를 지정해야 한다.상태 0은 불투명도 50%이고 상태 1은 이미지 불투명도 100%라고 가정합니다.그리고 우리는 모든 유한한 상태를 위한 문자열을 만들 수 있습니다. 그림마다 이 문자열은 1과 0으로 구성됩니다.

이미지 1은 상태 0, 이미지 2는 상태 0=> "00"

이미지 1은 상태 1, 이미지 2는 상태 0=> "10"

이미지 1은 상태 0, 이미지 2는 상태 1=> "01"

여기서 스토리지 possibleStates을 생성할 수 있으며 시스템이 허용하는 모든 가능한 상태를 제공합니다."11"은 기술적으로 발생할 수 있는 시나리오이지만 여기서 정의한 possibleStates 배열에 포함되지 않으므로 발생을 금지합니다.

const possibleStates = ['00', '10', '01']

하나의 수조에 있기 때문에, 우리는 주어진 유한한 상태에서 하나의 이미지의 모든 행위가 무엇인지를 쉽게 판단할 수 있다.possibleStates 수조를 가능한 상태의 경계로 삼아 IconSet 구성 요소를 만들었습니다. 이것은 우리가 사용할 useState 갈고리만 있습니다.우리의 기본 상태는 '00' 이기 때문에 기본 상태로 설정합니다.
다음에 이미지에 대해 우리는 OneIcon 구성 요소를 사용할 것이다. 이 구성 요소는 src 매개 변수를 받아들일 것이다. 이 매개 변수는 이미지의 경로와 hoverState이다. 우리는 현재 상태, 예를 들어'00'을 받아들이고 charAt 함수를 호출하여 이 문자열의 0이나 첫 번째 위치를 선택한 다음에 정수로 변환할 것이다.이 hoverState 숫자를 바탕으로 우리는 우리가 원하는 모든 유형의 전환 논리를 사용할 수 있다.이 경우 1이면 불투명도를 100%로 설정하고 그렇지 않으면 50%로 설정합니다. 그러나 OneIcon 구성 요소의 다양한 상태를 표시하기 위해 대량의 숫자를 사용할 수 있다고 상상할 수 있습니다.OneStep 구성 요소는 setMainState 메서드를 사용하여 stateArrayPosition에 전달되는 위치 변수에 따라 전체 상태를 "10"또는 "01"으로 변경합니다.

const possibleStates = ['00', '10', '01']

const OneIcon = ({ src, hoverState }) => (
  <img
    src={src}
    className={`${hoverState === 1 ? 'opacity-100' : 'opacity-50'}`}
  />
)

const OneStep = ({ setMainState, stateArrayPosition }) => (
  <span
    onMouseEnter={() => {
      setMainState(possibleStates[stateArrayPosition])
    }}
    onMouseLeave={() => {
      setMainState(possibleStates[0])
    }}
  >
    {`${stateArrayPosition}`}
  </span>
)

const IconSet = () => {
  const [mainState, setMainState] = useState(possibleStates[0])

  return (
    <div>
      <OneStep setMainState={setMainState} stateArrayPosition={1} />
      <OneStep setMainState={setMainState} stateArrayPosition={2} />
      <OneIcon
        src={'path/to/image1.png'}
        hoverState={parseInt(mainState.charAt(0))}
      />
      <OneIcon
        src={'path/to/image2.png'}
        hoverState={parseInt(mainState.charAt(1))}
      />
    </div>
  )
}

우리는 모든 유한 상태에 동그라미를 그려서 이 시스템을 시각화할 수 있으며, possibleStates 수조에서 사용하는 문자열로 이 문자열을 표시할 수 있으며, 이 문자열들은 모든 요소가 특정한 유한 상태에서의 행위를 대표한다.

각 변환은 onMouseEnter 구성 요소에서 onMouseLeave 또는 OneStep 이벤트를 트리거하면 트리거된다는 것을 화살표로 나타냅니다.
전체 설정의 묘미는 우리가 앞으로 진행할 수 있는 다양한 변경 사항에 적응할 수 있다는 데 있다.

에 3단계를 추가해야 합니까?문제없습니다. possibleStates의 모든 문자열에 세 번째 상태를 추가한 다음 OneStep과 OneIcon 구성 요소를 복사하고 붙이면 됩니다.

은 이미지가 1과 0보다 더 가능한 상태를 허용해야 합니까?OneIcon에 추가 상태 처리만 추가하면 됩니다.

은 "11"과 같은 가능한 상태를 추가해야 합니다.그룹에 추가하고 함수 호출만 하면 이 새로운 가능한 상태를 호출할 수 있습니다: setMainState(possibleStates[3])

은 주어진 유한한 상태에서의 개체 행위를 바꿔야 합니까?이 모든 정보는 possibleStates 그룹에 포함되어 있기 때문에 이 숫자들을 뒤집어서 특정한 유한한 상태의 필요한 이미지 상태와 일치하도록 합니다.

단점이 없는 방법은 없다. 여기서 주의해야 할 가장 큰 점은 큰 숫자 블록에서 개인의 1과 0을 계산하고 변경해야 할 때, 10개나 20개 항목을 포함하는 시스템에 상태 그룹을 설정하는 것이 두려울 수도 있다는 것이다.여기에서 모든 직위에 대한 코드 문서는 미래 개발자(그리고 당신 자신!)에 대한 당신의 의도를 어느 정도 밝힐 수 있습니다.
그러나 의심할 여지없이 유한상태기는 중등 임무를 쉽게 하고 도전적인 임무를 가능하게 한다. 그래서 이것은 내가 웹 페이지에서 복잡한 상태를 관리하는 데 자주 사용하는 방법이다.
더 많아요. 어디서 왔어요!
Click here to give us your email and we'll let you know when we publish new stuff. 저희는 귀하의 이메일 프라이버시를 존중합니다. 저희는 귀하께 스팸메일을 보내지 않습니다. 귀하는 언제든지 구독을 취소할 수 있습니다.
최초로 Code Mochi에 발표되었다.