React 갈고리 다시 보기:useEffect

나의 이전 문장에서 우리는 가장 자주 사용하는 갈고리 중 하나useState를 이해했다.이번에 우리는 또 다른 자주 사용하는 갈고리를 볼 것이다. useEffect:

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our "effect"), and call it later after performing DOM updates. ~ React docs

영향이 무엇입니까?
효과는 렌더링 단계에서 완료할 수 없는 어셈블리 작업이나 동작을 나타내는 부작용의 약어입니다.예를 들면 다음과 같습니다.

API에서 데이터 가져오기

데이터 구독 또는 문서 이벤트 탐지기 설정

운영 DOM

또한 두 가지 범주로 나눌 수도 있습니다.

청소해야 하는 효과

없는 효과

예를 들어, 만약 우리가 이벤트 탐지기를 문서에 추가한다면, 구성 요소가 마운트 해제될 때 삭제하기를 희망할 것입니다. 이것은 성능을 향상시키고 탐지기의 충돌을 피하는 데 도움이 될 것입니다.다른 한편, 구성 요소를 마운트 해제할 때 업데이트document.title와 같은 작업은 더 이상 진행할 필요가 없다.
정리 효과를 간소화하기 위해서 useEffect API는 갈고리에서 함수를 되돌려줍니다. 이 함수는 탐지기, 구독 등을 삭제하는 데 사용됩니다. 이전에는 componentDidMount 와 componentDidUnmount 생명주기 방법을 이용해서 이 모든 것을 처리할 수 있습니다. useEffect
사용 효과 분석
지금 우리는 useEffect의 작용을 토론했으니 문법을 살펴보자.

useEffect(() => {
  // 2. This function body is your effect
  window.addEventListener("resize", handleResize)

  return () => {
    // 1. Optionally clean up effects inside this function
    window.removeEventListener("resize", handleResize)
  }
}, []) // 3. Conditionally execute based on dependencies array

이 문법이 좀 이상해 보이면 걱정하지 마세요.몇몇 실제 예를 시작하기 전에, 우리는 모든 부분을 분해할 것이다.우리가 방금 그것을 토론했기 때문에 선택할 수 있는 청소 기능부터 시작합시다.

1. 정리
우리의 효과에서 우리는 함수를 되돌려 주는 것을 선택할 수 있다.이 구성 요소를 마운트 해제할 때, 이 함수는 우리가 실행하고자 하는 모든 청소 작업을 실행합니다.예시에서, 우리는 구성 요소가 DOM에 더 이상 존재하지 않을 때, 계속 탐지/터치하지 않도록 창에서 이벤트 탐지기를 삭제할 것입니다.

2. 효과
첫 번째 인자useEffect는 함수다.이 함수는 구성 요소를 설치할 때 실행할 작업을 정의하는 효과입니다.이 예에서, 우리는 handleResize 함수에 이벤트 탐지기를 resize 실행하는 창에 추가할 뿐입니다.

3. 의존항수 그룹
이 예에서 선택할 수 있는 두 번째 매개 변수는 이른바 '의존항수 그룹' 이다.본질적으로 이 그룹을 이용하여 구성 요소의 도구나 상태 값의 변화에 따라 효과의 조건을 제어할 수 있다.우리는 다음 절에서 이 문제를 더욱 깊이 토론할 것이다.

의존 관계 수조는 무엇입니까?

By default, effects run after every completed render, but you can choose to fire them only when certain values have changed. ~ React docs

위에서 말한 바와 같이 의존항수 그룹은 useEffect 갈고리에 전달할 수 있는 선택할 수 있는 보조 매개 변수이다.구성 요소의 값에 따라 효과를 쉽게 제어할 수 있도록 하기 위해서입니다.클래스 구성 요소에서 우리는 componentDidUpdate 생명주기 방법을 사용하여 같은 결과를 실현해야 할 가능성이 높다. 이것은 다음과 같다.

componentDidUpdate(prevProps, prevState) {
  if (prevState.cardTypes !== this.state.cardTypes) {
    // Your effect logic would live here
  }
}

dependencies 배열을 사용하여 다음 작업을 수행할 수 있습니다.

어셈블리가 렌더링될 때마다 효과 발생

useEffect(() => {
  const cardTypes = fetchCardTypes()
  setCardTypes(cardTypes)
})

첫 번째 렌더링 시에만 효과 발생

useEffect(() => {
  const cardTypes = fetchCardTypes()
  setCardTypes(cardTypes)
}, [])

일부 아이템 또는 상태치가 변경된 경우에만 효과 발동

useEffect(() => {
  const cardTypes = fetchCardTypes()
  setCardTypes(cardTypes)
}, [cards])

여기서 주의해야 할 점은 if 갈고리에 useEffect 문구를 사용하여 논리를 조건부로 집행할 수도 있지만 if 문구에 갈고리를 포장할 수는 없다는 것이다.React 유지 효과를 예측할 수 있는 일부 방법은 렌더링 시 모든 효과를 실행하는 것입니다.이런 효과가 나쁜 방법으로 여겨지는 것을 건너뛰는 것은 좋지 않으니 이렇게 하지 마라!

실상
아래의 모래상자에서, 나는 화성의 최신 날씨에 대한 정보를 제공하는 작은 응용 프로그램을 만들었다.엘론 머스크, 너의 마음을 먹어라!
간단하게 보기 위해서, 나는 두 개의 구성 요소를 만들었다. useEffect 와 App.전자는 Nasa API 및 애플리케이션 로직에서 데이터를 가져오고, 후자는 우리가 전달한 데이터를 도구로 간단하게 표시합니다.그렇기 때문에 우리 모두WeatherDisplay의 갈고리는 useEffect의 내부에 산다.
보시다시피 저희 구성 요소 내부에 실제로 3개App의 연결고리가 있습니다. 이것은 좀 이상하게 보일 수 있지만 이것이 바로 연결고리의 전체 개념입니다!이것은 우리로 하여금 우리의 구성 요소 논리를 구분하고 그것들이 촉발하는 효과에 대해 추리하기 쉽게 한다.이 예에서는 세 개의 훅이 다음 작업을 수행합니다.

Hook#1 사용useEffectstate

의 값은 렌더링마다 문서의 제목을 설정합니다

Hook#2는 처음 렌더링할 때만 API 데이터를 가져옵니다. 구성 요소가 업데이트될 때 API 호출을 계속하는 것을 원치 않기 때문입니다

day 갈고리 #3은 day의 값에 따라 day 또는 data의 값에 어떠한 변화가 발생할 때에 정확한 데이터 대상을 해석한다.
이 갈고리들 중 하나는 우리가 앞에서 논의한 선택 가능한 의존수 그룹의 다른 변체를 사용했다.코드를 좀 더 자세히 보세요. 왜 모든 그룹이 이렇게 보이는지 아십니까?
만약 네가 여전히 약간 곤혹스러우면 걱정하지 마라. 왜냐하면 '갈고리로 생각하는 것' 을 배우는 데는 약간의 시간이 필요할 수 있기 때문이다.그것들을 더 잘 사용하는 가장 좋은 방법은 그것을 사용하는 것이다. 따라서 위의 모래상자를 마음대로 사용하고 코드를 사용하십시오.좋은 시작으로 Hook# 2에서 의존 항목 배열을 완전히 삭제할 수 있습니다.무슨 일이 일어날까요?
의존 항목 배열이 비어 있으면 마운트할 때 API 데이터를 요청합니다. 이 경우 한 번만 발생합니다.이전에, 우리는 componentDidUpdate 구성 요소 prevProps 를 현재 구성 요소 props 와 비교하고, 그것을 사용하여 할 일이 있는지 확인할 것입니다.이제 useEffect 우리는 더 이상 이렇게 할 필요가 없다. 우리가 관심을 가지는 도구의 값을 정의하고 그 중 하나가 바뀔 때만 효과를 실행할 수 있다.우리는 이 시리즈의 뒷부분에서 이 점을 상세하게 토론할 것이다.
종속 항목 배열을 완전히 제거하면 각 렌더링에서 효과가 실행됩니다. 즉, 어셈블리가 다시 렌더링될 때마다 API 호출이 수행됩니다.상태 변경(예: Today 또는 Yesterday 버튼 클릭) 등의 간단한 작업으로 인해 렌더링이 다시 수행되므로 기본적으로 사용자가 버튼 중 하나를 클릭할 때마다 데이터를 가져옵니다.이것은 어플리케이션 성능과 API 청구서에 도움이 되지 않습니다.
최종적으로 갈고리는 응용 프로그램의 논리를 구분하여 다시 사용하고 추리하기 쉽도록 하는 데 목적을 두고 있다.useEffect도 예외는 아니다.모든 갈고리와 마찬가지로, 모든 렌더링에서 기본적으로 실행되지만, 다른 갈고리와 달리, 논리적 실행을 조건부로 제어하는 방법 (즉 의존항수 그룹) 을 제공합니다.useEffect는 보통 componentDidMount,componentDidUpdate와componentWillUnmount로 묘사되지만 갈고리의 등효 생명주기 방법의 측면에서 갈고리를 고려하는 것은 최대한 피하겠습니다.반대로 구성 요소에서 발생할 효과를 확인하고, 원하는 효과가 실행되는 빈도를 확인하며, 구성 요소가 마운트 해제될 때 작업을 정리합니다. (필요할 경우)
다음 구성 요소에 useEffect를 추가합니다.아마도 너는 중독될 것이다.