자바스크립트 - 리액트 훅 비동기 최선의 방법

이제 useEffect를 사용하면, Hooks가 있는 React 컴포넌트에서 componentDidMount를 대신할 수 있습니다.

시나리오 "서버에 대한 초기 고유 호출":

이를 수행하기 위해, useEffect에서 useEffect의 두 번째 인자인 DependencyList는 매번 빈 배열이어야 합니다. 그렇지 않으면 애플리케이션이 모든 상태 변경마다 서버에 fetch 호출을 보냅니다.

즉, 이것이 getData를 얻는 최선의 방법이라는 뜻입니다

useEffect(() => {
  console.log("useEffect, fetchData here");
}, []);

상태가 변경될 때마다 서버 요청을 비활성화하기 위해 []를 DependencyList 매개변수로 사용하는 것이 모범 사례인가요?

깃허브 링크 https://github.com/facebook/react/issues/14326

답변 #1

네. 이것이 최선의 접근 방식입니다.

리액트 문서에서:

빈 배열 []을 입력으로 전달하는 것은 React에 해당 효과가 컴포넌트의 어떤 값에도 의존하지 않는다는 것을 알려주므로, 그 효과는 마운트 시에만 실행되고 언마운트 시에 정리됩니다; 업데이트 시에는 실행되지 않습니다.

useEffect는 매우 강력하고, 제가 가장 좋아하는 훅입니다. 두 번째 매개변수 배열에 상태 변화를 감지할 변수 하나 이상을 전달하여 모니터링할 수 있으며, 아니면 사용하고 있는 접근 방식을 통해 마운트와 언마운트를 단순히 감시할 수도 있습니다.

답변 #2

어떤 매개변수가 변경될 때마다 서버를 호출하고 싶은지에 따라 달라집니다. 동일한 비동기 호출을 원한다면 두 번째 매개변수로 []를 사용할 수 있습니다.

그러나 예를 들어 각 페이지에 userID 상태/속성이 있는 사용자의 프로필 페이지를 표시하는 경우, 새 사용자 ID에 대해 데이터를 다시 가져올 수 있도록 그 ID를 useEffect의 두 번째 매개변수에 값으로 전달해야 합니다. 사용자가 직접 A의 프로필에서 B의 프로필로 이동할 경우, 컴포넌트를 다시 마운트할 필요가 없으므로 여기서 componentDidMount만으로는 충분하지 않습니다.

전통적인 수업 방식에서는, 당신은 다음과 같이 할 것입니다:

componentDidMount() {
  this.fetchData();
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.id !== this.state.id) {
    this.fetchData();
  }
}

훅을 사용하면, 그것은 다음과 같습니다:

useEffect(() => {
  this.fetchData();
}, [id]);

아래 코드를 실행해 결과를 확인해 보세요. 예를 들어 id를 2로 바꾸면 useEffect가 다시 실행되는 것을 볼 수 있습니다.

function Todo() {
  const [todo, setTodo] = React.useState(null);
  const [id, setId] = React.useState(1);
  
  React.useEffect(() => {
    if (id == null || id === '') {
      return;
    }
    
    fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then(results => results.json())
      .then(data => {
        setTodo(data);
      });
  }, [id]); // useEffect will trigger whenever id is different.

  return (
    <div>
      <input value={id} onChange={e => setId(e.target.value)}/>
      <br/>
      <pre>{JSON.stringify(todo, null, 2)}</pre>
    </div>
  );
}

ReactDOM.render(<Todo />, document.querySelector('#app'));

<script src="https://unpkg.com/[email /umd/react.development.js"></script>
<script src="https://unpkg.com/[email /umd/react-dom.development.js"></script>

<div id="app"></div>

당신은 useEffect에 대해 읽어보아야 하며, 그것으로 무엇을 할 수 있고 무엇을 할 수 없는지 알아야 합니다.