React의 조건부 렌더링

API 데이터를 사용하는 프론트엔드로 React를 사용할 때 Redux는 확실히 당신의 친구입니다. 후크를 사용하여 페이지 로드 시 API 데이터를 Redux Store로 직접 가져와서 전체 React 앱이 앞으로 사용할 수 있도록 할 수 있습니다. 그러나 이렇게 하는 데에는 작은 문제가 있습니다. 로드할 데이터가 많으면 페이지 자체를 로드하는 데 시간이 오래 걸리므로 사용자가 사이트 정지를 경험하게 됩니다. 좋지 않다! 다행히도 "Thunk"라는 미들웨어를 적용할 수 있어 해당 데이터를 비동기식으로 가져올 수 있습니다. 이렇게 하면 API에서 데이터를 수집하는 동안 페이지가 계속 로드되어 정지를 방지할 수 있습니다.

불행히도 기술적으로 페이지가 완전히 로드되는 동안 해당 콘텐츠가 있어야 할 빈 공간이 로드됩니다. 이는 사용자 경험의 관점에서 항상 훨씬 더 나은 것은 아닙니다...그래서 무엇을 할 수 있습니까? 저것? 사용자에게 다음 사항을 알리는 것 외에는 그다지 많지 않습니다.

사이트가 여전히 작동 중이며 고정되지 않음

가는 길에 데이터가 있으니 조금만 참으면 된다

많은 데이터를 로드하는 전문적으로 구축된 웹사이트를 방문하면 의심할 여지 없이 이 두 가지 목표(예: 물레 또는 구식 로드 바)를 모두 달성하는 로드 애니메이션을 보게 될 것입니다.

좋아요, 할 수 있습니다. 이제 남은 것은 React에서 어떻게 하느냐의 문제입니다. 이것은 충분히 간단해 보입니다. 제품이 아직 존재하는 경우 제품을 렌더링하기 위해 if 문을 사용하거나 애니메이션을 로드하기만 하면 됩니다. 까다로운 부분은 JSX 구문에 있습니다. 일반적으로 다음과 같이 if 문을 작성할 수 있습니다.

if (items.length > 0) {
  // render products;
} else {
  // render animation;
};

그러나 페이지의 일부를 조건부로 렌더링한다는 것은 작동하지 않는 render() 함수 내부에서 if 문을 호출해야 함을 의미합니다. 이 문제를 해결하기 위해 별도의 메서드의 일부로 렌더링 함수 외부에 if 문을 정의할 수 있습니다. 그런 다음 렌더링 함수 내에서 해당 메서드를 호출합니다.

separateIfFunction = () => {
  if (items.length > 0) {
    return <div className=”loading-animation”></div>;
  } else {
    return items.map(item => <Item property={item.property} key={item.id} />);
  };
};

render() {
  return (
    separateIfFunction();
    // any other page elements to be loaded BEFORE API data is rendered
  );
};

작동하지만 더 많은 내용을 포함하려면 3차 구문items.length > 0 ? render products : render animation을 사용하고 전체를 대괄호로 묶을 수도 있습니다. 가독성을 위해 여러 줄로 나누면 다음과 같습니다.

render() {
  return (
    {items.length > 0
      ? <div className=”loading-animation”></div>
      : return items.map(item => <Item property={item.property} key={item.id} />);
    };
    // any other page elements to be loaded BEFORE API data is rendered
  );
};

그리고 당신은 그것을 가지고 있습니다. 이제 페이지가 처음 로드될 때 API에서 데이터 가져오기를 시작하고 나머지 콘텐츠 로드를 계속할 수 있지만 데이터가 진행 중임을 사용자에게 알릴 수 있습니다. 해당 데이터를 사용할 수 있게 되면 페이지의 해당 부분을 다시 렌더링하여 데이터 구성 요소를 추가합니다.