수용물

Introduction

What arguments are passed to useEffect hook?

First argument to useEffect

Return value of effect

Second argument to useEffect

Passing a function as a dependency

References

이것은 나의 React hooks 시리즈의 세 번째 문장이다.만약 당신이 아직 앞의 두 개를 보지 못했다면, 아래의 링크를 클릭하여 보십시오.

useEffect 연결 소개

갈고리는 ES6 클래스를 작성하지 않은 상태에서 상태와 다른react 기능을 사용할 수 있는 함수입니다.useEffect 갈고리는reacthooks API의 일부분이다.만약react 생명주기에 익숙하다면, useEffect 갈고리는 생명주기 방법componentDidMount, componentDidUpdate, componentWillUnmount의 조합에 해당한다.사실 React documentation on Hooks에 따르면 useEffect 갈고리는 ES6 구성 요소의 생명주기 방법이 가져온 도전을 해결하기 위해 개발되었다.이 글은 갈고리가 어떤 효과와 어떻게 사용되는지에 관한 것이기 때문에 나는 갈고리가 왜 개발되었는지 토론하지 않겠다.너는 그것을 볼 수 있다Here.
React 기능 구성 요소에서는 API에서 데이터를 가져오거나 side effects 갈고리 안에서 수동으로 DOM을 업데이트하는 등 useEffect 작업을 수행합니다.

useEffect 연결에 전달되는 매개변수는 무엇입니까?

useEffect는 두 개의 매개 변수를 가진 함수입니다.useEffect에 전달되는 첫 번째 매개 변수는 effect 함수입니다. (왜 이 갈고리가 useEffect 으로 명명되었는지 추측할 수 있습니다.) 두 번째 매개 변수는 의존 항수 그룹입니다.다음은 그것의 사용 설명입니다.

import React, { useEffect } from "react";
import { render } from "react-dom";
const App = props => {
  useEffect(() => {
    console.log("Effect has been called");
  }); //Second argument to useEffect has been omitted
  return <h1> Hello world! </h1>;
};  
const root = document.getElementById("root");
render(<App />, root);

useEffect의 첫 번째 매개변수

첫 번째 매개 변수는 effect 또는 cleanup 반환 함수입니다.undefined 구성 요소를 설치할 때 실행(첫 번째 렌더링 시), 후속 업데이트에서 실행할지 여부는 두 번째 매개 변수로 전달되는 의존 항목 그룹에 의해 결정됩니다.

유효한 매개 변수의 반환값

Previous section 에서 우리는 effect의 첫 번째 매개 변수는 useEffect라는 함수라고 말했다.effect 함수를 되돌려야 하거나 정의되지 않은 매개 변수는 받아들여지지 않습니다.반환 함수가 있으면 반환 함수effect를 호출합니다.cleanup 호출cleanup 전에 실행합니다(이전 렌더링 효과를 지웁니다).왜 그리고 언제 정리해야 하는지 궁금하면 React documentation 의 설명을 보십시오.effect 함수나 정의되지 않은 함수를 되돌려주기 때문에 effect 없는 경우가 적지 않다.

useEffect의 두 번째 매개변수

effects의 두 번째 매개 변수는 dependencies 의 수조이다.구성 요소를 설치한 후 cleanup 실행하는 시간을 제어하려면 의존 항목 그룹을 두 번째 매개 변수로 전달합니다.useEffect 는 effect 외부에서 정의된 값이지만 dependencies 내부에서 사용됩니다.

     function App(){
         const[state, setState] = useState(0);
          // state is defined here
         useEffect(() => {
              console.log(state); 
              //value of state is used here therefore must be passed as a dependency
         }, [state])

     }

React는 종속성의 현재 값과 이전 렌더링 값을 비교합니다.만약 그것들이 같지 않다면 useEffect 호출합니다.
이 매개변수는 선택 사항입니다.무시할 경우 렌더링할 때마다 실행됩니다useEffect.첫 번째 렌더링 시에만 실행하려면 effect 빈 그룹을 전달할 수 있습니다.

     useEffect(() => {
       console.log("Effect has been called");
}, []) // Empty array as dependency, useEffect is invoked once

의존항은 상태나 아이템일 수 있습니다.주의해야 할 것은 effect 내부에서 effect 외부 정의를 사용하지만 구성 요소 내부에서 정의된 값을 사용하려면 의존항으로 전달해야 한다는 것이다.아래와 같다.

  function App(props) {
     const [count, setCount] = React.useState(1);
     // count and setCount are defined inside component(App) but outside useEffect
     useEffect(() => {
       //count is being used inside useEffect. Therefore must be passed as dependency.
       console.log(count);
}, [count])
}

함수를 의존항으로 전달하다

useEffect 외부에서 함수를 정의하고 useEffect 내부에서 호출하려면 의존항으로 전달해야 합니까?
예:

 function App(props){
    const [data, setData] = useState(null);
    const fetchData = () => {
         //fetch some data 
    }
    useEffect(() => {
    fetchData(); //Invoked inside useEffect
}, [fetchData])

}

외부에서 함수를 정의하고 내부에서 호출하는 것을 권장하지 않습니다useEffect.상기 상황은 매번 렌더링할 때 effect 호출된다. 전달된 의존항은 함수이고 함수는 대상이기 때문이다.React는 이전 렌더링과 현재 렌더링을 비교합니다. 서로 다르기 때문에 effect 에 대한 호출을 촉발합니다.
근거React documentation on useEffect hook,

It’s difficult to remember which props or state are used by functions outside of the effect. This is why usually you’ll want to declare functions needed by an effect inside of it. Then it’s easy to see what values from the component scope that effect depends on:

You can also move the function inside the effect so that it doesn’t need to be in its dependency list.

본문을 읽어 주셔서 감사합니다.이것은 fetchData에 대한 간략한 소개입니다.fetchData 갈고리에 관해서 나는 이 문장에서 언급하지 않은 것이 매우 많다.익숙해지는 데는 시간이 좀 걸린다.만약 당신이 깊이 이해하고 싶다면effect, 아래의 참고 자료를 참고하십시오.만약 당신이 이 문장이 매우 유용하다고 생각한다면, 위에서 공유해 주십시오.누군가가 그것도 매우 유용하다는 것을 발견할 것이다.기술적으로 부정확한 부분을 발견하면 언제든지 논평을 발표해 주십시오.

참고 문헌

React Hooks FAQ

Hooks API Reference

Complete guide to React