로드 시 메서드를 한 번만 호출하는 응답

로드 시 메서드를 한 번만 호출하는 응답

나는 Hooks에 처음 와서 나를 미행하게 만드는 사건들을 겪고 있다.

누군가가 나에게 납득이 가는 솔루션을 설명하거나 제공해주길 바란다.

1. 컴포넌트 마운트에 메서드를 한 번만 로드하면 혼란이 생깁니다.이 방법을 시도해 봤는데, 효과가 있는데 이해가 안 돼요.누가 설명 좀 해줄래?

   const useMountEffect = fun => useEffect(fun, [])
   
   useMountEffect(() => {
     if (!isEdit) handleAddRow()
   })
   
   const handleAddRow = () => {
     let appendArr = [...listArr, '']
     setListArr(appendArr)
   }
   

다음 스레드:React useEffect를 사용하여 로드 함수를 한 번만 호출하는 방법

의존하지 않고 use Effect만 사용하려고 했는데, eslint는 그것을 좋아하지 않고, 그들은 다음 줄을 건너뛰는 것을 권장하고 있습니다.그것은 좀 허술한 것 같습니다.

// eslint-disable-next-line

내가 맞다면 당신은 비슷한 것을 원한다.componentDidMount라이프 사이클 방식그 방법은

function MyComponent(props){
    useEffect(()=>{
        // do stuff here...
    }, []) // <-- empty dependency array
    return <div></div>
}

무슨 일이 일어나고 있는지 이해하려면 useEffect 후크가 어떻게 작동하는지 이해해야 합니다.의존관계 없이 useEffect 훅을 사용하면 상태 또는 프로포트가 변경되어 재렌더가 발생할 때마다 효과가 트리거됩니다.그러나 빈 어레이를 의존관계로 전달하면 다른 것에 의존하지 않기 때문에 컴포넌트가 마운트될 때만 효과가 트리거됩니다.

빈 배열[]인수는 useEffect()를 1회만 실행하도록 지시합니다.

마운트 시 한 번만 실행됩니다.componentDidMount하곤 했다.

설명:

useEffect()2개의 인수(함수와 의존관계 배열)를 사용합니다.

useEffect(
    yourFunction, // <- function that will run on every dependency update
    [] // <-- empty dependency array
) 

dependency array 인수는 함수를 실행할 시기를 나타냅니다.종속성이 변경되지 않으면 다시 실행되지 않습니다.종속성이 업데이트되면 기능이 다시 실행됩니다.

빈 어레이(의존관계 없음)를 전달하면 이 함수는 마운트에서만 실행됩니다.

ESLint 누락 종속성 오류

React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

ESLint 규칙의 이유는useEffect()는 모든 의존관계 갱신을 실행할 수 있도록 설계되어 있습니다.모든 의존관계는 어레이에 추가됩니다.

이를 무시하려면 종속 어레이 행 위에 다음을 추가합니다.

// eslint-disable-next-line react-hooks/exhaustive-deps

전체 앱에 한 번(글로벌하게) 기능을 실행하고자 하는 사람에게는 다음과 같은 해결책이 될 수 있습니다.

if (typeof window !== 'undefined') { // Check if we're running in the browser.
   // ✅ Only runs once per app load
  checkAuthToken();
  loadDataFromLocalStorage();
}

function App() {
  // ...
}

출처/확장 설명은 이쪽입니다.

언급URL : https://stackoverflow.com/questions/58101018/react-calling-a-method-on-load-only-once