과소평가된 React Hook - useSyncExternalStore

개요

React 생태계의 숨겨진 강력한 힘인 'useSyncExternalStore' 후크를 발견하세요. 이 기사에서는 전통적인 상태 관리 패러다임에 도전하는 혁신적인 잠재력을 살펴봅니다. 외부 데이터 소스를 완벽하게 통합하고 구성 요소 간 통신을 강화함으로써 이 후크는 독특하면서도 강력한 접근 방식을 제공합니다.

저희와 함께 useSyncExternalStore를 풀어보세요. 우리는 그 메커니즘을 분석하고, 그 이점을 밝히고, 실제 사례를 통해 실용적인 응용 프로그램을 선보일 것입니다. 결국에는 이 연결고리를 활용하여 복잡성을 간소화하고 성능을 향상하며 코드베이스에 새로운 수준의 조직을 가져오는 방법을 이해하게 될 것입니다.

용법

React에 따르면 useSyncExternalStore는 외부 저장소를 구독할 수 있게 해주는 React Hook입니다. 그런데 "외부 상점"이란 정확히 무엇입니까? 말 그대로 2가지 기능이 필요합니다:

• 구독 기능은 스토어를 구독하고 구독을 취소하는 기능을 반환해야 합니다.
• getSnapshot 함수는 저장소에서 데이터의 스냅샷을 읽어야 합니다. 맞아요 처음에는 구하기 어려울 수도 있어요. 예시로 들어갑니다.

데모

오늘 데모에서는 클래식 애플리케이션인 "Todo List"를 살펴보겠습니다.

매장

먼저 초기 상태를 정의해야 합니다.

export type Task = {
  id: string;
  content: string;
  isDone: boolean;
};

export type InitialState = {
  todos: Task[];
};

export const initialState: InitialState = { todos: [] };

타입을 정의한 후 할 일이 있는 상태를 빈 배열로 생성한 것을 볼 수 있습니다

이제는 감속기입니다.

export function reducer(state: InitialState, action: any) {
  switch (action.type) {
    case "ADD_TASK":
      const task = {
        content: action.payload,
        id: uid(),
        isDone: false,
      };
      return {
        ...state,
        todos: [...state.todos, task],
      };

    case "REMOVE_TASK":
      return {
        ...state,
        todos: state.todos.filter((task) => task.id !== action.payload),
      };

    case "COMPLETE_TASK":
      const tasks = state.todos.map((task) => {
        if (task.id === action.payload) {
          task.isDone = !task.isDone;
        }
        return task;
      });
      return {
        ...state,
        todos: tasks,
      };

    default:
      return state;
  }
}

리듀서에는 ADD_TASK, REMOVE_TASK, COMPLETE_TASK의 3가지 작업만 있습니다. 이는 할 일 목록 논리의 전형적인 예입니다.

마지막으로 우리가 기다리고 있는 것은 바로 매장입니다.

let listeners: any[] = [];

function createStore(reducer: any, initialState: InitialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function dispatch(action: any) {
    state = reducer(state, action);

    emitChange();
  }

  function subscribe(listener: any) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }

  const store = {
    dispatch,
    getState,
    subscribe,
  };

  return store;
}

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

export const store = createStore(reducer, initialState);

이 코드 조각은 TypeScript에서 간단한 Redux와 유사한 상태 관리 시스템을 생성하는 방법을 보여줍니다. 작동 방식은 다음과 같습니다.

1. listeners 배열: 이 배열은 상태가 변경될 때마다 알림을 받을 리스너 함수 목록을 포함합니다.

2. createStore 함수: 이 함수는 Redux 스타일 저장소를 생성하는 역할을 합니다. 두 가지 매개변수가 필요합니다:

• 리듀서(reducer): 현재 상태와 전달된 액션을 기반으로 다음 상태를 계산하는 리듀서 함수입니다.
• initialState: 애플리케이션의 초기 상태입니다.

1. state: 이 변수는 애플리케이션의 현재 상태를 보유합니다.

2. getState 함수: 현재 상태를 반환합니다.

3. 디스패치 함수: 작업 객체를 승인하고 이를 현재 상태와 함께 리듀서에 전달하고 결과로 상태를 업데이트한 다음, EmitChange 함수를 호출하여 리스너에게 상태 변경을 알립니다.

4. subscribe 함수: 리스너 함수를 승인하고 이를 리스너 배열에 추가한 다음 리스너를 제거하기 위해 호출할 수 있는 정리 함수를 반환합니다.

5. store 객체: 생성된 store 객체는 디스패치, getState 및 구독 함수에 대한 참조를 보유합니다.

6. emitChange 함수: 리스너 배열을 반복하고 각 리스너 함수를 호출하여 상태 변경을 알립니다.

코드 끝에서 createStore 함수를 사용하여 지정된 리듀서 및 초기 상태를 사용하여 저장소가 생성됩니다. 이제 이 저장소를 가져오고 애플리케이션의 다른 부분에서 사용하여 상태를 관리하고 제어할 수 있습니다.

이 코드는 상태 관리 시스템의 단순화된 구현을 제공하며 Redux와 같은 라이브러리에 있는 일부 고급 기능 및 최적화가 부족하다는 점에 유의하는 것이 중요합니다. 하지만 리스너와 리듀서 함수를 사용하여 상태 관리의 기본 개념을 이해하는 데 좋은 출발점이 됩니다.

useSyncExternalStore 후크를 사용합니다. 다음과 같은 상태를 얻을 수 있습니다:

const { todos } = useSyncExternalStore(store.subscribe, store.getState);

이 후크 호출을 사용하면 가독성과 유지 관리성을 유지하면서 전역적으로 동적으로 매장에 액세스할 수 있습니다

장점과 단점

"useSyncExternalStore" 후크는 React 애플리케이션 내 상태 관리 측면에서 장점과 잠재적인 단점을 모두 제시합니다.

장점:

1. 외부 소스와의 원활한 통합: 후크를 사용하면 외부 데이터 소스와 손쉽게 통합하여 상태 관리에 대한 통합 접근 방식을 촉진할 수 있습니다. 이러한 통합을 통해 다양한 출처의 데이터 처리를 단순화하고 애플리케이션의 응집력을 강화할 수 있습니다.

2. 교차 구성 요소 통신: "useSyncExternalStore"는 구성 요소 간의 효율적인 통신을 촉진하고 데이터 공유를 간소화하며 복잡한 소품 드릴링 또는 컨텍스트 관리의 필요성을 줄여줍니다.

3. 성능 개선: 상태 관리를 중앙 집중화하고 상태 업데이트 전파를 최소화함으로써 이 후크는 렌더링 성능을 최적화하여 더 응답성이 뛰어나고 효율적인 애플리케이션을 만들 수 있는 잠재력을 가지고 있습니다.

4. 단순성과 깔끔한 ​​코드: 후크의 추상화된 API는 더욱 깔끔하고 체계적인 코드로 이어질 수 있어 특히 대규모 애플리케이션에서 이해하고 유지 관리하기가 더 쉽습니다.

5. 보일러 플레이트 감소: "useSyncExternalStore"는 상태 관리를 위한 중복 코드 작성 필요성을 줄여 애플리케이션 전체 상태를 관리하는 간결하고 일관된 방법을 제공할 수 있습니다.

단점:

1. 학습 곡선: 이 후크에 익숙하지 않은 개발자는 보다 확립된 상태 관리 솔루션에서 전환할 때 학습 곡선을 경험할 수 있습니다. 새로운 접근 방식에 적응하면 처음에는 개발 속도가 느려질 수 있습니다.

2. 사용자 정의 제한 사항: 후크의 사전 정의된 기능은 모든 애플리케이션의 고유한 요구 사항에 완벽하게 맞지 않을 수 있습니다. 후크의 기능을 넘어서는 동작을 사용자 정의하려면 추가 해결 방법이 필요할 수 있습니다.

3. 잠재적 추상화 오버헤드: 내부 메커니즘에 따라 후크는 특별히 애플리케이션 요구 사항에 맞게 맞춤화된 보다 최적화된 솔루션에 비해 성능이나 메모리 사용량에 약간의 오버헤드를 초래할 수 있습니다.

4. 커뮤니티 및 생태계: 과소평가되거나 덜 알려진 후크인 "useSyncExternalStore"에는 잘 확립된 커뮤니티와 포괄적인 생태계가 부족하여 잠재적으로 사용 가능한 리소스나 타사 라이브러리가 줄어들 수 있습니다. .

5. 호환성 및 향후 업데이트: React의 향후 버전과의 호환성 및 후크 자체에 대한 잠재적인 업데이트가 우려 사항이 될 수 있습니다. 장기적인 지원과 원활한 업그레이드를 보장하려면 추가적인 노력이 필요할 수 있습니다.

결론

요약하자면, useSyncExternalStore는 상태 관리에 대한 고유한 접근 방식을 제공하여 원활한 통합과 구성 요소 간 통신을 강조합니다. 향상된 성능 및 단순화된 코드와 같은 여러 가지 이점을 제공하지만 개발자는 프로젝트 요구 사항과의 호환성을 신중하게 평가하고 잠재적인 학습 곡선 및 제한 사항을 고려해야 합니다.

위 내용은 과소평가된 React Hook - useSyncExternalStore의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!