React Hooks API 호출 - inside useEffect?

React Hooks API 호출 - inside useEffect?

리액션(후크 포함)을 배우고 있는데, 모든 API 호출이 useEffect 후크 안에 있어야 하는지 물어보고 싶었어.

내 시험 앱에는 다음과 같은 작업 패턴이 있다.상태를 설정한 다음 버튼을 클릭한 후, API에 get 요청을 보내고 블록에서 수신된 데이터를 주(州)에 추가하는 함수를 실행한다.

또한 useEffect 후크는 해당 상태가 변경될 때만 실행되며(상태 값이 있는 종속성 어레이 사용) 이전 상태의 새 데이터를 사용하여 ANTER 상태를 설정한다.그 두 번째 상태는 내 앱이 렌더 블록에서 렌더링하는 것이다.

이러한 방식으로 데이터 가져오기는 실제로 useEffect 자체가 아닌 버튼 클릭으로 실행되는 함수에서 이루어진다.효과가 있는 것 같다.

이게 유효한 패턴인가?미리 고마워!

편집: 예: 버튼을 클릭할 때 실행되는 기능

const addClock = timezone => {
    let duplicate = false;
    selectedTimezones.forEach(item => {
      if (item.timezone === timezone) {
        alert("Timezone already selected");
        duplicate = true;
        return;
      }
    });
    if (duplicate) {
      return;
    }
    let currentURL = `http://worldtimeapi.org/api/timezone/${timezone}`;
    fetch(currentURL)
      .then(blob=>blob.json())
      .then(data => {
        setSelectedTimezones(prevState => [...prevState, data]);
      }
        );
  }

예, 단추 클릭과 같은 동작에서 발생하는 아피스 호출은 useEffect 호출의 일부가 될 수 없다.그것은 당신의 이벤트 핸들러 기능의 일부가 될 것이다.

useEffect를 호출할 때, DOM에 대한 변경사항을 플러시한 후 "효과" 기능을 실행하도록 "대응"을 지시하는 경우

useEffectResact가 DOM을 업데이트한 후 실행할 로직을 포함한다.그래서 기본적으로useEffect첫 번째 렌더링 후와 모든 업데이트 후 모두 실행.

참고: 항상 비동기 로직을 내부에 기록하십시오.useEffect이벤트 핸들러 함수에 의해 호출되지 않는 경우.

예, onClick과 같은 이벤트 핸들러에서 api 요청을 할 수 있다.

모든 렌더에서 실행되므로 기능 구성 요소 내에서 직접 요청을 하지 마십시오.요청이 다른 기능 안에 있고 실제로 요청을 하고 싶을 때만 해당 기능을 호출하는 한 문제가 없다.

참조URL: https://stackoverflow.com/questions/61348598/react-hooks-api-call-does-it-have-to-be-inside-useeffect