🔖 카탈로그

The Task

Setup

Adding the useEffect hook

Structure of the useEffect hook

The dependency array

Example with dependencies and cleanup

그래서 본 강좌의 이 부분에서useEffect 갈고리를 토론할 것입니다.React가 제공하는 기존 3가지 클래스 함수에 비해 그것이 무엇인지, 어떻게 작동하는지, 그리고 어떻게 공평한지 알 수 있다.

❗ 단지 참고로 제공하다

나는 너무 많은 세부 사항을 말하고 싶지 않다. 나는 이 짧은 부분을 의미 있는 정도로 보류할 것이다. 그러나 나는 네가 이 강좌를 완성한 후에 건의한다.특히 React의 창시자인 댄 아브라모프의 설명을 얻기 위해 아래에 첨부한 링크를 읽으십시오.
여기에는 약간의 독서가 있지만 내용이 없다.

Useffect 후크는 무엇입니까?

useEffect 갈고리는 React 기반 클래스의 생명주기 기능 중 3개, 즉

componentDidMount

componentDidUpdate

componentWillUnmount

React 16.8과 React Native 0.59에서부터useEffect 갈고리는 이 세 함수를 모두 하나의 함수로 조합하여 더욱 간결한 외관을 가진다.
앞의 세 함수와 같이useEffect 갈고리에서 데이터 취득, 구독 등 부작용을 수행할 수 있습니다

Note how I said "hook(s)" with an s.

이게 정답이야!기능 구성 요소는 여러 개의useEffect 연결을 통해 코드의 다른 조작을 처리할 수 있습니다.🎉🎉

그럼 이거 어떡하지?

우선, 우리는useEffect 갈고리의 임무를 설명하고, 우리는useEffect 갈고리와 그 구조를 소개할 것이다. 우리는 우선 클래스 구성 요소에서 구성 요소를 작성하여 당신이 그 작업 원리를 이해할 수 있도록 할 것이다. (있다면, 초보자도 이해할 수 있도록 할 것이다.)마지막으로, 우리는 그것이 일반적인 클래스 함수에 비해 사용하는 장단점을 토론할 것이다.
자, 시작합시다.

과업

We'll keep it simple. Sweet. Like Music 🎵

We're simply going to use the site JSON placeholder에서 무작위 게시물(댓글, 사용자 이름 등) 데이터를 생성합니다. 우선 클래스 생명주기 함수를 사용하여 구성 요소에 끌어다 놓은 다음 연결하여 페이지에 표시합니다.
그 다음에스크롤 위치를 감시하기 위해 구성 요소에 이벤트 탐지기를 추가하는 또 다른 용례를 보여 드리겠습니다.이것은 우리가 의존 관계를 정리하는 것을 더욱 잘 이해하는 데 도움이 될 것이다.

우리 글을 쓰기 시작합시다.

We'll start by laying down the foundation for our component. So we'll use our App.js file which comes by default in create-react-app

응용 프로그램만 확보하면 됩니다.js 파일은 다음과 같다.

React from 'react'

class App extends React.Component{
    render(){
        return <div></div>
    }
}

export default App;

예를 들어 상태 변수를 사용하자.

  React from 'react'

  class App extends React.Component{
+    constructor(){
+        this.state = {
+            posts = []
+        }
+    }

     render(){
        return <div></div>
     }
  }

  export default App;

이제 ComponentWillMount를 사용하여 JSON 자리 표시자로부터 데이터를 가져옵니다.

React from 'react'

class App extends React.Component{
    constructor(){
        this.state = {
            posts = []
        }
    }
+
+   componentDidMount(){
+       fetch("https://jsonplaceholder.typicode.com/posts")
+           .then((response) => response.json())
+           .then((data)=>this.setState({posts: data})
+   )}
+
    render(){
-     return <div></div>
+     return( 
+         <div>
+          {posts.map((p)=>{
+             return (
+                  <div key={p.id}>
+                    <h1>{p.title}</h1>
+                    <h4>{p.subtitle}</h4>
+                  </div>
+              )
+          })}
+          </div>
+     )
   }
}

export default App;

지금까지 모든 것이 정상이다.이것은 네가 '갈고리 앞' 시대에 쓴 것이다.
그것만 있으면, 너는 전방에서 데이터를 얻는 데 성공할 수 있을 것이다.

이제 우리 변해봅시다.

So lets start by changing up the component and it's state to a hook based state like the previous tutorial

import React, {useState} from 'react'

function App(){
  const [posts, setPosts] = useState([]);

  return(
    <div></div>
  )
}

다음은 useEffect 갈고리를 소개합니다.

내가 전에 말했듯이그것은 세 가지 중요한 부분이 있다.이 간단한 예는 단지 한 부분만 사용할 것이다.우리의 예에서, 이 동작은 모든 게시물의 수령 요청입니다.
그것들을 추가하고 표시합니다.

+ // Import useEffect
 import React, {useState, useEffect} from 'react'

  function App(){
    const [posts, setPosts] = useState([]);

   //Add the useEffect.
+   useEffect(()=>{
+      fetch("https://jsonplaceholder.typicode.com/posts")
+        .then((response) => response.json())
+        .then((data)=> setPosts(data));
+   },[]);

    return (
-     <div></div>
-   );
+   return(
+     <div>
+       {/* Render Posts */}
+       {posts.map((p)=>(
+           <div>
+             <h1>{p.title}</h1>
+             <h4>{p.subtitle}</h4>
+           </div>
+       )}
+     </div>
+   )
+ }

✨And thats it !!✨

So let see what we exactly did with the component.

The useState hook is similar to what we did in the previous tutorial.

The useEffect is the new part here for us.

Let's see how it works.

구조

리셋 함수 (매개 변수로 다른 함수에 전달되는 함수) 는useEffect 연결의 첫 번째 매개 변수입니다.

이 함수에서, 우리는 부작용, 데이터 획득 호출, 구독, 탐지기를 정의했다.그것은 구성 요소 렌더링 후에 실행됩니다. 그러면 구성 요소 렌더링이 갈고리에서 실행되는 코드에 의해 막히지 않습니다.
해명할 게 없어요.
우리가 주의해야 할 것은 두 번째 논점이다

의존 항목 그룹😵

의존 관계 수조는 도대체 무엇입니까?물어봐도 돼.
말 그대로 의존수 그룹은 본질적으로 변수 목록이고 구성 요소는 그 변경 사항을 감시합니다.
의존 항목 그룹의 변수가 변경되었을 때, 구성 요소는 구성 요소 상태의 스냅샷 (임시 복사본) 을 저장하고useEffect 갈고리에 생성된 리셋 함수를 새로 호출하여 구성 요소를 재구성합니다.
의존항 수조는 선택할 수 있는 매개 변수로 생략할 수도 있지만, 임의의 의존항 변수를 포함할 수도 있다.똑똑해야 돼.
그러나 의존항수 그룹이 선택할 수 있어도그것을 무시하면 함수 호출의 무한 순환을 초래할 것이다.
이useEffect를 함수에 복사해서 실행해 보십시오. 무슨 일이 일어날지 보십시오.

useEffect(()=>{
    console.log("Hello");
});

너는 콘솔에서 이 점을 알아차릴 것이다.너는 결국 무한 순환을 초래할 것이다.이것은 정말 사람을 곤혹스럽게 한다. 이것이 바로 내가 모두에게 단 아브라모프의 this article을 읽으라고 촉구한 이유이다. 나는 교과서의 마지막 부분에도 이 책을 열거했다.
쿨하다괜찮습니다.그럼 왜 우리 example above에 공수조가 있죠?(다음은 세그먼트)

useEffect(()=>{
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data)=> setPosts(data))
},[]);

간단히 말하면.빈 의존 항목 그룹을 제공합니다. React는 구성 요소가 처음 나타날 때만 이 특정한useEffect 갈고리를 실행합니다.이것은 구성 요소가 DOM에 불러올 때 기본적으로 우리의 componentDidMount 함수를 대체했다.

알겠습니다. 그럼 UI를 어떻게 UseEffect로 업데이트합니까?

Since you hopefully understood how the useEffect works theoretically. I'll show you the second example I mentioned here
useEffect와useState를 사용하여 UI의 스크롤 위치를 감시하는 구성 요소를 만들 것입니다.
useEffect 갈고리의 '정리' 부분과 그 기능도 소개할 것입니다.

import React, {useEffect, useState} from 'react';

function ScrollWatcher(){

    const [offsetValue, setOffsetValue] = useState(0);

    useEffect(()=>{
        window.onScroll = function(){
          setOffsetValue(window.pageYOffset);
       }

       return ()=>{
           window.onScroll = null;
       }
    }, [window.pageYOffset]);

    return (
       <div style={{height: "1000vh"}}> 
           {offsetValue} 
        </div>
    )

}

우리가 여기서 뭘 했는지 묘사해 보자.
구성 요소가 마운트되었을 때,useEffect 갈고리가 창 스크롤 이벤트에 탐지기를 추가하고 상태를 업데이트하는 것을 알려 줍니다.
이곳의 포인트는,

의존항수 그룹

반환 기능

의존 항목 그룹이 현재 창이 있습니다.페이지YOffset 변수가 추가되었습니다.창문만 열면페이지 오프셋 값이 변경됩니다.useEffect 연결은 offsetValue 상태 변수를 다시 실행하고 업데이트합니다.
이 반환 함수는 구성 요소가 마운트 해제될 때 실행될 동작입니다.이것이 바로 우리가'청소'기능이라고 부르는 이유다.구성 요소나 변수에 추가된 모든 구독이나 탐지기를 삭제합니다.
이렇게이것은 좋은 해석은 아니지만, 네가 그 중의 요점을 이해하기를 바란다.내가 네가 반드시 읽어야 할 문장을 추천하기 전에, 나는 너에게 마지막 건의를 할 것이다.

프롬프트

여러 개의useEffect 연결을 만들 수 있습니다.하나는 데이터를 얻는 데 사용되고, 하나는 구독에 사용됩니다.

여러 개의useEffect 연결을 만들면 쓰기 순서에 따라 실행됩니다.

은useEffect 갈고리에 대한 내용을 최대한 많이 읽어서 어떻게 작동하는지 이해할 수 있도록 합니다.그것은 코드를 디버깅할 때 많은 시간을 절약할 수 있다.

그 외에

좋아했으면 좋겠어!😊

다음 댓글에서 당신의 생각을 알려주세요!

useCallback 갈고리에 대한 강좌를 읽습니다. (미래에 추가할 것입니다.)

한층 더 읽다

저자 댄 아브라모프

A complete guide to useEffectReact

에서 제공

Official Docs