React 후크에 대한 다섯 가지 팁

오늘날 React 및 기능적 구성 요소를 사용할 때 후크가 필요합니다.

후크 작업은 클래스 구성 요소의 수명 주기 메서드보다 쉽지만 몇 가지 문제가 발생하여 오늘 내 솔루션을 공유하고 싶습니다.

1. 코드를 잘라

더 나은 이해를 위해 코드를 작은 조각으로 자르는 것을 좋아합니다. 리딩 순서대로 4개의 블록을 만듭니다. 일반적으로 기능 구성 요소와 클래스 구성 요소 간에 동일한 레이아웃을 사용합니다. 이 기사에서는 기능적 구성 요소에 대해서만 설명합니다.

첫 번째 블록은 모든 후크와 변수를 위한 것입니다. 상태, 변수 또는 컨텍스트와 같은 모든 데이터와 다음 모든 효과로 시작합니다.

두 번째 블록은 이벤트용입니다.

세 번째 블록은 경우에 대한 것입니다. 때때로 jsx를 작은 조각으로 나누거나 삼항 조건이 있습니다. 가독성을 유지하려면 일부 부분을 분리하는 것이 좋습니다.

마지막 것은 주요 jsx 부분이 있는 return 문을 포함합니다.

const ReloadButton: React.FC<ReloadPageButtonProps> = () => {
  const { t } = useTranslation();
  const { dispatch } = useContext(MyContext);

  const handleClick = () => {
    dispatch({ type: Types.Reload });
  };

  return (
    <Button onClick={handleClick}>
      <Refresh />
    </Button>
  );
};

export default ReloadButton;

2. 사용자 지정 후크 사용

하나의 상태와 하나의 효과만 있는 경우 구성 요소의 모든 항목을 유지할 수 있습니다. 그러나 더 많은 것이 있다면 사용자 지정 후크를 만드는 것이 좋습니다.

사용자 지정 후크는 사용 및 존중으로 시작해야 합니다React hook's rules.

명심하세요: 커스텀 훅에서 커스텀 훅을 사용할 수 있습니다.

좋은 예는 선택 입력 필드의 옵션을 채우는 후크입니다. 첫 번째 후크는 API에서 데이터를 가져오고 두 번째 후크는 옵션을 빌드합니다.

양식 구성 요소에는 옵션 후크만 있습니다. 다른 변수와 함수는 숨겨져 있습니다. 옵션 훅은 마운트 시 페치 훅을 시작하고 페치 훅의 로딩 상태와 준비가 된 경우에만 옵션을 표시합니다.

예 ! 사용자 지정 후크는 다른 후크의 변수를 표시할 수 있습니다.

const useOptions = (): [
  SelectedOption[] | undefined,
  boolean
] => {
  const [options, setOptions] = useState<SelectedOption[] | undefined>();
  const [data, isLoading, setLoading] = useData();

  useEffect(() => {
    setLoading(true)
    }, []);

  useEffect(() => {
    if (data && !isLoading) {
      const optionsResult = data
        .map((e) => {
          return { label: e.name, value: e.id };
        })
      setOptions(optionsResult);
      setLoading(false);
    }
  }, [data, isLoading, setOptions]);

  return [options, isLoading];
};

export default useOptions;  

3. 구조 분해를 사용하여 사용자 지정 후크의 변수 표시

게시할 복잡한 양식과 같이 노출할 변수가 많은 큰 사용자 지정 후크가 있는 경우 개체에 모든 변수를 압축할 수 있습니다.

객체의 값을 업데이트하려면 이전 상태를 사용하고 새 값과 병합한 다음 업데이트 함수 내에서 반환합니다.

const [value, setValue] = useState({name:'tomato', type:'fruit', price:1.72})

setValue((prevState) => ({ ...prevState, price: 1.99 }))

// in your form component

const {name, type, price} = value;

4. 단순한 useEffect 선호

효과 후크에 DRY 원리를 사용합니다. 종속성이 많은 하나의 효과 후크만 생성하는 경우 종속성이 업데이트될 때마다 후크가 실행됩니다. 후크에 원치 않는 부작용이나 조건부 루프가 발생할 수 있습니다.

할 수 있을 때 작은 것으로 나누면 하나가 됩니다.

5. 컨텍스트와 리듀서 후크 결합

구성 요소 간에 변수를 공유해야 하고 Redux를 사용하고 싶지 않다면 이 두 후크를 결합할 수 있습니다.

초기 상태와 감속기 함수로 감속기 후크를 초기화합니다. 컨텍스트 제공자에 대한 값으로 상태 및 디스패치 기능을 제공하면 작업이 완료됩니다. 컨텍스트 공급자의 모든 자식은 상태 및 디스패치 작업에 액세스할 수 있습니다.

// Context component
const ContextWrapper: React.FC<ContextWrapperProps> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <Context.Provider value={{ state, dispatch }}>
        {children}
    </Context.Provider>
  );
};

export default ContextWrapper;

// Context file with reducer

interface ContextStateType {
  data: Data[] | undefined;
}

export enum Types {
  Get = 'GET_DATA',
  Update = 'UPDATE_DATA',
}

interface Get {
  type: Types.Get;
  payload: Data[];
}
interface Update {
  type: Types.Update;
  payload: Data;
}

type ActionType = Get | Update;

export const initialState: ContextStateType = {
  data: undefined,
};

// [...] file is cut

export const reducer = (
  state: ContextStateType = initialState,
  action: ActionType
): ContextStateType => {
  let newState: ContextStateType;
  switch (action.type) {
    case Types.Get:
      newState = { ...state, data: action.payload };
      break;
    case Types.Update: {
      newState = updateData(state, action);
      break;
    }
    default:
      throw new Error('Unknown action');
  }
  return newState;
};

export const Context = createContext<{
  state: ContextStateType;
  dispatch: Dispatch<ActionType>;
}>({
  state: initialState,
  dispatch: () => null,
});

결론

일반적으로 몇 가지 구성 요소 간에 일부 변수를 공유해야 할 때 앱 및 React 컨텍스트의 단일 데이터 저장소로 Redux를 사용했습니다.

React 후크는 클래스 구성 요소의 수명 주기 메서드보다 사용하기 쉬운 훌륭한 도구입니다.

이것은 일반 영어로 된 나의 첫 번째 기사입니다. 이전 기사는 프랑스어로 되어 있으며 내 블로그에서 사용할 수 있습니다. 번역을 원하시면 댓글을 달아주시거나 로 연락주세요.