동적 파생과 useEffect를 죽이는 방법

제목이 조금 '클릭미끼'긴 하지만 발상은 틀리지 않습니다.

저는 useEffect가 나쁜 후크라고 생각하지 않습니다. 실제로는 그 반대입니다. 그러나 파생 기계로 작동하는 React에서 상태 동기화를 위해 useEffect를 사용하는 것은 최선의 선택이 아니며 핵심 팀에서도 권장하지 않습니다.

하지만 잠깐, 상태를 동기화해야 하는 경우가 있다면 어떻게 될까요?

예, 매우 드문 경우이고 아마도 더 나은 솔루션 옵션이 있을 수 있지만 앱에 게시물이 있고 사용자가 좋아요 버튼을 클릭할 때 낙관적인 업데이트를 처리할 로컬 상태가 필요하다고 가정해 보세요. 같은 일이 발생했는지 실제로 알기 위해 외부 상태(백엔드에서 오는)와 동기화합니다.

가변 파생

상태와 파생을 동시에 수행할 수 있는 프리미티브가 필요한 경우입니다. 개념적으로 말해서, 우리는 이를 가변 파생이라고 생각할 수 있습니다. Ryan Carniato는 이에 대한 좋은 블로그 게시물을 가지고 있지만 React의 반응성 관리 방식과 관련된 몇 가지 제한 사항이 있지만 이 새로운 기본 요소는 단 하나의 파생 및 상태입니다.
기본 동작으로 파생되어 마지막으로 업데이트된 정보 소스(서버에서 오는 데이터 소품)를 가져옵니다.
사용자가 좋아요 버튼을 클릭했을 때의 상태입니다. 이 변경 사항은 일시적이며 다음 종속성 변경 시 덮어쓰여집니다.

물론 React에는 없지만 그런 기본 형식을 상상할 수 있습니다. 긍정적인 점:

• useEffect에서 사용 사례를 하나 더 제거합니다.
• 상태로 처리할 수 있는 파생 항목이 있음이 분명해졌습니다.

useMemoState

const [internalState, setInternalState] = useMemoState(() => data, [data]);

후크는 일반 useMemo와 같은 두 개의 인수를 허용합니다. 첫 번째 인수는 메모 함수로, 정상적으로 처음 실행될 때 반환되는 값은 상태입니다. 두 번째 인수는 값을 추적하고 필요한 경우 메모를 다시 계산하기 위한 잘 알려진 종속성 배열입니다. 상태/메모 값과 상태를 일시적으로 변경하는 setter라는 두 가지 값이 있는 튜플을 반환합니다.

후크를 사용하는 방법은 다음 예와 같습니다.

function MemoState ({ data }: { data: State}) {
  const [internalState, setInternalState] = useMemoState(() => data, [data]);

  return (
    

      
name: {internalState?.title}
      
{internalState?.like ? "liked post" : "not liked post"}
       {
        // likePost();
        setInternalState(state => ({
          ...state,
          like: !state.like
        }))
      }}>Like Button
    
  )
}

이 방법으로 여기에서 useEffect의 필요성을 제거하고 이 후크가 무엇을 하고 무엇을 할 수 있는지 정확히 알고 문제에 상태와 파생이 동시에 필요한 개념적 공백을 채울 수 있습니다. 아이러니하게도 결과적으로 효과의 필요성이 사라집니다.

React에서 비슷한 일을 어떻게 할 수 있나요?

React 규칙을 따르고 후크를 안전하게 유지하려면 useEffect를 사용하여 오늘날의 React에서 유사한 것을 만들어야 합니다. 앞으로도 그런 훅은 안 만들어질 것 같은데, 누가 알겠습니까?

여기서 useEffect의 사용을 피하려면 이를 처리하기 위해 미니 상태 라이브러리와 같은 일부 외부 코드를 사용하거나, 엄격한 React 프리미티브를 유지하려면 useRef를 사용하여 값 동기화를 유지해야 합니다.

이 접근 방식의 문제점은 React 규칙을 위반한다는 점이며 문서에서는 권장하지 않습니다. 효과 없이 작동하는 유일한 방법은 구성 요소를 렌더링하는 동안 참조를 동기화하는 것이므로 전혀 안전하지 않습니다.

간단하고 안전하게 유지하기 위해 후크의 예는 다음과 같습니다.

const [internalState, setInternalState] = useMemoState(() => data, [data]);

위 내용은 동적 파생과 useEffect를 죽이는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!