React useEffect로 로딩 함수를 한 번만 호출하는 방법

React useEffect로 로딩 함수를 한 번만 호출하는 방법

---

useEffect는 훅이 모든 변화 기능에 전달 실행할 반응한다. 원하는 속성이 변경 될 때만 호출되도록 최적화 할 수 있습니다.

초기화 함수를 componentDidMount호출하고 변경시 다시 호출하지 않으 려면 어떻게해야 합니까? 엔터티를로드하려고하지만로드 기능에 구성 요소의 데이터가 필요하지 않다고 가정 해 봅시다. useEffect후크를 사용하여 어떻게 만들 수 있습니까?

class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}

후크를 사용하면 다음과 같이 보일 수 있습니다.

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}

---

useEffect초기 렌더링 이후에 제공된 함수 만 실행하려면 빈 배열을 두 번째 인수로 제공 할 수 있습니다.

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}

---

TL; DR

useEffect(yourCallback, []) -첫 번째 렌더링 후에 만 ​​콜백을 트리거합니다.

상해

useEffect구성 요소를 렌더링 할 때마다 기본적으로 실행 되므로 효과가 발생합니다.

useEffect컴포넌트에 배치 할 때 리 액트 에 콜백을 실행하고 싶다고 말합니다. 렌더링은 렌더링 후 및 DOM 업데이트를 수행 한 후 효과를 실행합니다.

콜백 만 전달하면 각 렌더링 후에 콜백이 실행됩니다.

두 번째 인수 (배열)를 전달하면 React는 첫 번째 렌더링 후와 배열의 요소 중 하나가 변경 될 때마다 콜백을 실행합니다. 예를 들어 배치 할 때 useEffect(() => console.log('hello'), [someVar, someOtherVar])-콜백은 첫 번째 렌더링 후 someVar또는 그 중 하나 someOtherVar가 변경 되거나 렌더링 된 후에 실행됩니다 .

두 번째 인수에 빈 배열을 전달하면 React는 각 배열을 렌더링 한 후 비교하고 아무것도 변경되지 않았으므로 첫 번째 렌더링 후에 만 ​​콜백을 호출합니다.

---

빈 배열을에 두 번째 인수로 전달하십시오 useEffect. 이것은 효과적으로 React에게 문서를 인용하여 알려줍니다 .

이것은 React에게 효과가 props 또는 state의 값에 의존하지 않으므로 다시 실행할 필요가 없다는 것을 나타냅니다.

다음은 작동한다는 것을 보여주기 위해 실행할 수있는 스 니펫입니다.

function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

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

---

useMountEffect 훅

컴포넌트 마운트 후 한 번만 함수를 실행하는 것은 구현 세부 사항을 숨기는 자체 후크를 정당화하는 일반적인 패턴입니다.

const useMountEffect = (fun) => useEffect(fun, [])

모든 기능적 구성 요소에서 사용하십시오.

function MyComponent() {
    useMountEffect(function) // function will run only once after it has mounted. 
    return <div>...</div>;
}

---

useMountEffect 후크 정보

When using useEffect with a second array argument, React will run the callback after mounting (initial render) and after values in the array have changed. Since we pass an empty array, it will run only after mounting.

참고URL : https://stackoverflow.com/questions/53120972/how-to-call-loading-function-with-react-useeffect-only-once