'updateState' 반응

저는 React의 초보자이며 Material UI와 Redux Toolkit을 사용하여 'Gully Clinic'이라는 공중 보건 부서 프로젝트를 진행하고 있습니다.

React 프로젝트에서 작업했다면 구성 요소 상태 관리를 접하게 될 만큼 빠르지 않을 것이라고 생각합니다. React를 배우기 시작할 때 배우는 기본 사항 중 하나라고 생각합니다.

기능적 구성 요소의 경우 구문은 다음과 같습니다.

import { useState } from 'react';

const CustomInput = (props) => {
  const [value, setValue] = useState('');

  return <>
    ...
  </>
}

빈<></> 괄호가 무엇인지 궁금하다면 <React.Fragment></React.Fragment> 의 축약형입니다. 이에 대한 자세한 내용은 official docs 에서 찾을 수 있습니다.

단일 상태 값을 사용한 구성 요소입니다.
실제 시나리오에서는 이것이 유일한 경우가 아니며 여러 상태 값을 저장하고 처리해야 합니다.

예를 들어 pageSize 상태를 통해 관리해야 하는 데이터 그리드가 있는 경우 다양한 필터에 대한 값과 함께 다음과 같이 단일 상태를 통해 관리할 수 있습니다.

import { useState } from 'react';

const EmployeeDataGrid = (props) => {
  const [state, setState] = useState({
    pageSize: 5,
    nameFilter: '',
    designationFilter: '',
  });
}

예를 들어 일부 사용자 상호 작용을 통해 pageSize가 변경된 경우 상태를 업데이트하려면 이러한 시나리오에서 모범 사례는 아래와 같이 상태를 설정하는 것입니다.

...

const onPageSizeChange = (newPageSize) => {
  setState((prevState) => {
    return {
      ...prevState,
      pageSize: newPageSize,
    }
  })
}

여기에서는 setState 메서드의 함수 인수 변형을 사용하고 있습니다.

다른 시나리오는 여러 상태 값을 함께 업데이트해야 하는 경우입니다. 예를 들어 resetFilters와 같은 이벤트 리스너를 사용하여 처리할 버튼 상호 작용으로 모든 필터를 한 번에 재설정하도록 사용자를 제공합니다.

...

const resetFilters = () => {
  setState((prevState) => {
    return {
      ...prevState,
      nameFilter: '',
      designationFilter: '',
    }
  })
}

상태를 변경하는 이러한 상호 작용이 앱에 많이 있는 경우 결국에는 이 코드setState((prevState) => { ... })가 포함된 많은 함수 또는 이벤트 리스너를 갖게 됩니다. 나에게 이것은 코드의 가독성을 줄이고 구성 요소 코드 크기를 불필요하게 늘리기 시작했기 때문에 문제가 되었습니다.

setState와 함께 updateState 함수

그래서 부분 상태 키 값 쌍을 받아들이고 상태를 업데이트하는 구성 요소 자체에 updateState 함수를 작성했습니다. 구경하다 -

...

const updateState = (newState) => {
  setState((prevState) => {
    return {
      ...prevState,
      ...newState
    }
  })
}

// usage
const resetFilters = () => {
  updateState({
    nameFilter: '',
    designationFilter: '',
  })
}

모든 stateful 구성 요소가 필요했기 때문에 구성 요소에 추가updateState가 반복되었습니다updateState. 그래서 useObjectState라는 별도의 개별 유틸리티 함수로 추출하여 일반적인 updateState 객체 및 state 함수와 함께 setState를 반환합니다.

import { useState } from 'react';

export const useObjectState = (initialState) => {
  const [state, setState] = useState(initialState);

  const updateState = (newState) => {
    setState((prevState) => {
      return {
        ...prevState,
        ...newState
      }
    });
  }

  return [state, setState, updateState];
};

이 게시물이 마음에 들면 어떻게든 도움이 되거나 할 말이 있으면 댓글로 알려주세요. :)

중요 사항

공식 docs 에 명시된 대로 updateState 에서 이미 처리하고 있으므로 setState 필요하지 않다고 말할 수 있습니다. 실제로 클래스 기반 구성 요소와 기능 구성 요소를 모두 사용했다면 setState 기능 구성 요소의 부분 개체에서는 작동하지 않는다는 것을 알 수 있습니다. SetStateAction에서 @types/react/index.d.ts의 유형 정의가 이를 확인합니다. 이 파일의 885번째 줄에서 다음을 찾을 수 있습니다.

// Unlike the class component setState, the updates are not allowed to be partial
type SetStateAction<S> = S | ((prevState: S) => S);