지연된 구성 요소 만들기

오늘 우리는 이러한 구성 요소를 만들어야 하는 이유와 setTimeout()을 사용하여 수행하는 방법과 Reacts 렌더링 방법이 동기 방식으로 작동하는 이유와 Hooks API를 사용하여 지연된 목록 효과를 생성하는 방법을 알아볼 것입니다.

따라서 React에서 아래 코드 예제에 있는 작업을 시도하고 수행하면 작동하지 않으며 렌더링 메서드는 모든 구성 요소가 한 번에 표시되고 멋진 애니메이션을 추가할 수 없는 시간까지 setTimeout()이 완료될 때까지 기다립니다. (이 경우 목록 항목).

const todos = [
  {
    name: 'Learn how to create a delayed component',
    isComplete: false
  },
  {
    name: 'Like this post',
    isComplete: false
  },
  {
    name: 'Share this post (see what I am getting at here) 😀',
    isComplete: false
  }
];

..그리고 Todos 컴포넌트(잘못된 방식):

import React from 'react';

export default TodoList = () => {
  return (
    <ul>
      {todos.map(({ name, isComplete }, index) =>
        setTimeout(() => {
          <li key={index} className={`${isComplete ? 'isComplete' : ''}`}>
            {name}
          </li>;
        }, index * 200)
      )}
    </ul>
  );
};

이제 <TodoList /> 구성 요소가 생각한 대로 작동하거나 작동하지 않을 수 있습니다. Reacts 렌더링 프로세스는 동기적 의미로 setTimeout()가 호출되면 타이머 기능이 완료될 때까지 기다린 다음 요소를 렌더링하므로 각 목록 항목이 렌더링될 때 지연이 발생하지 않습니다.

다시 시도해 보겠습니다. 먼저 <DelayedComponent/>를 생성해야 합니다.

import React from 'react';

export default DelayedComponent = ({ wait, children }) => {
  const [isShown, setIsShown] = React.useState(false);

  React.useEffect(() => {

    const timer = setTimeout(() => {
      setIsShown(true);
    }, wait);

    return () => clearTimeout(timer);
  }, [wait]);

  return isShown && children;
};

이것이 어떻게 작동하는지 살펴보겠습니다. 이름을 지정한 두 개의 소품wait을 선언해야 합니다. 이것은 구성 요소가 렌더링될 때까지 기다려야 하는 시간을 받아들이고 다른 하나는 항상 호출되는 표준 소품 이름children이며 모든 자식을 렌더링할 수 있습니다. <DelayedComponent/> 내에 중첩된 요소 즉:

<DelayedComponent>
  {/* start child elements */}
  <h1>This is a title</h1>
  <div>This is the main content</div>
  {/* end child elements */}
</DelayedComponent>

그런 다음 의도한 요소/자식을 표시하기 위한 상태를 선언합니다. 이를 위해 useState() 후크를 사용할 수 있습니다. 이것의 초기 값을 false로 설정할 수 있습니다.

이제 올바르게 구현될 경우 정말 강력할 수 있는 useEffect() 후크를 사용하기 시작하면서 상황이 약간 흥미로워집니다. useEffect()는 기본적으로 클래스 기반 구성 요소에서 얻는 componentDidMount() 수명 주기 메서드이며 return 후크 내부에 useEffect() 있을 때 componentWillUnmount()와 유사하게 클래스 기반 구성 요소에 있습니다.

그래서 우리가 한 것은 변수 timer를 setTimeout() 함수에 할당하고 wait 소품을 타이머 함수의 밀리초 매개변수에 전달한 것입니다.

React.useEffect(() => {
  const timer = setTimeout(() => {
    setIsShown(true);
  }, wait);

  return () => clearTimeout(timer);
}, [wait]);

useEffect() 후크의 마지막 인수를 보면 배열도 전달하는 것을 볼 수 있습니다. 이것은 종속성 배열이며 이것이 하는 일은 우리가 전달하는 모든 것을 추적하므로 우리의 경우에는 wait 소품이 됩니다. 마지막으로 타이머 기능을 clearTimeout()로 지워 정리합니다.