React Hook 컴포넌트 작성을 위한 멘탈 모델

지금쯤이면 React hooks를 사용하는 컴포넌트를 모두 작성했을 것입니다. 그러나 많은 경우 우리는 필요한 후크가 무엇인지 또는 사용자 정의 후크가 필요한지 고심합니다.

이 기사에서는 내 멘탈 모델 또는 구성 요소를 작성하는 방법을 결정하는 방법에 대해 설명합니다. 내 프로세스를 볼 수 있도록 한 번에 한 단계씩 수행하고 각 단계에서 내가 생각하는 내용을 알려 드리겠습니다.

렌더를 먼저 작성

저는 시각적으로 생각하기 때문에 렌더링하고 싶은 것부터 시작하는 것을 좋아합니다. 이것은 내가 필요한 데이터 요소를 결정하는 데 도움이 될 것입니다.

예를 들어, 온도 및 현재 조건을 표시하는 날씨 구성 요소를 작성하는 경우 마크업으로 시작합니다.

💭 What I'm thinking...
I want to display the current temperature and weather conditions for a given city.

이런 식일 수 있습니다.

const Weather = ({ city }) => {
  return <span>{temp}˚F - {conditions}</span>;
};

시원한! 이제 내가 무엇을 렌더링하고 싶은지 알게 되었고 그렇게 함으로써 어떤 데이터 조각이 필요한지 알게 되었습니다.

데이터의 스텁

💭 What I'm thinking...
I'd like to see my markup visually before I proceed.

이 시점에서 누락된 변수가 있으므로 앱이 컴파일되지 않으므로 자주 작동하는 것을 볼 수 있도록 해당 데이터를 조롱합니다.

const Weather = ({ city }) => {
  const temp = 72;
  const conditions = 'Perfect';

  return <span>{temp}˚F - {conditions}</span>;
};

위에서 볼 수 있듯이 temp 및 conditions 를 조롱했습니다. 이제 앱을 실행할 때 내 구성 요소를 볼 수 있습니다.

Note: In reality, your component will probably need to have a loading state (unless you're using Suspense), as the data is loaded asynchronously, but for simplicity's sake, I'm not showing that here.

시각적으로 보이는 것이 마음에 들면 실제로 데이터를 가져오는 작업으로 넘어갈 수 있습니다. 이를 위해 저는 모든 것을 커스텀 훅으로 캡슐화하는 것을 좋아합니다.

사용자 정의 후크에 대한 호출 쓰기

💭 What I'm thinking...
What will the custom hook signature look like?

이제 사용자 정의 후크를 작성하는 데 필요한 모든 것이 있습니다. 우리는 입력(예: city )과 출력(예: temp 및 conditions )을 알고 있습니다. 이것은 우리의 계약입니다.

이제 컴포넌트의 모의 데이터를 아직 작성되지 않은 사용자 정의 후크에 대한 호출로 교체해 보겠습니다. 이제 구성 요소가 다음과 같이 보일 것입니다.

const Weather = ({ city }) => {
  const { temp, conditions } = useWeather(city);

  return <span>{temp}˚F - {conditions}</span>;
};

사용자 정의 후크 작성

💭 What I'm thinking...
Now I'll write a custom hook that satisfies the contract.

모든 것이 준비되었으면 계약을 이행하는 후크를 작성할 시간입니다.

다음은 useWeather라고 하는 스텁 아웃 사용자 정의 후크입니다. 현재로서는 모의 데이터를 반환합니다.

const useWeather = (city) => {
  return {
    temp: 72,
    conditions: 'Perfect',
  };
};

사용자 지정 후크에서 모의 ​​데이터를 가져오기 때문에 앱은 계속 실행되어야 합니다.

후크에서 데이터를 얻는 방법은 "구현 세부 사항"입니다. 이는 구성 요소가 데이터를 얻는 방법이나 위치를 신경 쓰지 않아야 함을 의미합니다. REST 끝점에서 가져오는 것을 작성하거나 Apollo를 사용하여 GraphQL 서버에서 데이터를 가져올 수 있습니다. 요점은 계약을 설계한 후에는 구성 요소에 중요하지 않다는 것입니다.

요약하자면

컴포넌트를 디자인할 때...

렌더링된 마크업으로 시작

필요한 변수의 스텁

스텁된 변수를 데이터를 가져오기 위한 호출로 바꿉니다.

계약을 이행하는 커스텀 후크 작성

이 단계를 따르고 이것을 멘탈 모델로 사용하면 후크가 있는 React 구성 요소를 작성하는 것이 더 간단해집니다.