UseEffect React의 비하인드 스토리

useEffect와 React에 대한 깊은 이해에 대해 더 알아보기 전에. 자바스크립트의 개념을 숙지하시기를 권장합니다.

https://www.geeksforgeeks.org/top-javascript-concepts-to-know-before-learning-react/

React 개발자로서 가장 중요한 개념 중 하나는 useEffect가 어떻게 작동하는지 이해하는 것입니다.

사용원리효과

UseEffect는 반응 구성 요소에서 부작용을 수행하는 데 사용됩니다.

부작용이란 무엇인가요?

부작용은 React 구성요소의 범위를 벗어난 세계와 상호작용하는 모든 작업을 의미합니다.

뭔가를 하기 위해 리액트 컴포넌트 외부에 접근해야 할 때 사이드 이펙트를 수행합니다!!

몇 가지 일반적인 부작용:

• API에서 데이터를 가져오는 중입니다.
• DOM 문서 및 창 업데이트
• 타이머 함수 setTimeout 및 setInterval.

반응 시 useEffect의 서명:

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

또는 다음 코드로만 작동합니다:

useEffect(() => { 
    // execute side effect
})

useEffect에 대한 기본 이론을 설명한 후 실습을 확인해 보겠습니다!!

useEffect를 사용한 간단한 예:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `${count} new messages!`;
    })


    return (
        <>
            <h3>{ count } new Messages!</h3>   
            <button onClick={ () => setCount(count + 1) }>Increase</button>
        </>
  )
}

이 코드에서 무엇을 하고 있나요?

• 구성요소는 처음에 개수가 0으로 설정된 상태로 렌더링됩니다.

• useEffect 후크는 문서 제목을 "0 new message!"로 업데이트합니다.

버튼을 클릭했을 때:

• setCount 함수가 호출되어 카운트 상태가 증가합니다.
• 구성요소가 업데이트된 개수 값으로 다시 렌더링됩니다.
• useEffect 후크가 다시 트리거되어 새 개수를 반영하도록 문서 제목을 업데이트합니다.
• 이 코드는 문서 제목을 업데이트하는 간단한 카운터를 생성하여 상태를 관리하고 부작용을 수행하기 위한 React의 useState 및 useEffect 후크의 기본 사용법을 보여줍니다.

useEffect는 구성요소가 변경될 때마다 실행됩니다.

빈 배열에 Effect 사용

코드를 약간 변경하겠습니다.

  useEffect(() => {
        document.title = `${count} new messages!`;
        console.log('Run useEffect');
    }, [])

useEffect 매개변수에 빈 배열을 추가하고 있습니다.

• 컴포넌트가 생성되거나 초기화될 때만 실행됩니다.

데이터를 가져올 때 매우 유용합니다. 이 경우 코드 부분을 한 번만 실행해야 한다는 것을 알 수 있습니다.

변수가 있는 useEffect

useEffect의 변형은 변수(하나 이상)를 추가하는 것입니다.
이 변수가 변경되면 코드 일부가 실행됩니다.

예를 확인해 보세요:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);
    const [newCount, setNewCount] = useState(5);

    useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount])


    return (
        <div>
           <>
              <h3>{ count } new Messages!</h3>   
              <button onClick={ () => setCount(count + 1) }>Increase</button>
          </>

          <>
              <h3>{ newCount } new Messages!</h3>   
              <button onClick={ () => setNewCount(newCount + 5) }>Increase</button>
          </>
        </div>

  )
}

useState가 포함된 새 변수를 추가하고 newCount에 따라 useEffect를 추가했습니다.

다음 경우에 렌더링됩니다.

• 페이지 제목에 newCount를 설정하는 구성요소의 시작 부분에서
• newCount 변수에서 변경 사항을 감지한 후

참고: 쉼표를 추가하여 더 많은 변수를 전달할 수 있습니다

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

CleanUp 기능이 있는 UseEffect

어떤 경우에는 약속과 같은 일부 기능을 정리해야 합니다.

예시를 통해 자세히 살펴보겠습니다.

타이머를 만들어 페이지에 표시해 보세요.

setInterval을 사용하여 이 작업을 수행할 수 있지만 정리를 구현하지 않으면 타이머가 리소스를 소비하고 앱이 느려집니다.

그래서 ClearInterval을 반환해야 합니다.

여기에 코드가 있습니다.

useEffect(() => { 
    // execute side effect
})

결론:

useEffect에 대해 간략히 설명합니다.

useEffect.-

UseEffect는 React 컴포넌트에서 Side Effect를 수행하는 데 사용됩니다.

부작용은 다음과 같습니다.

• API에서 데이터 가져오기
• dom 업데이트 - 문서, 창
• 타이머 이벤트 - setInterval, setTimeOut

useEffect(콜백, 종속성)

1 콜백은 함수 - sideEffect 로직 - 실행할 항목입니다.
2 종속성 - 변수 배열(선택 사항) - 실행 시기.

마지막으로 useEffect의 세 가지 변형이 있습니다.

1. 종속성 없는 UseEffect - 첫 번째 렌더링으로 실행되고 감지된 모든 변경 사항에서도 실행됩니다.

2. 빈 배열로 UseEffect - 첫 번째 렌더링에서만 실행됩니다.

3. 변수와 함께 UseEffect - 첫 번째 렌더링 시 실행되고 해당 변수 변경 시 실행됩니다.

4. 정리 기능이 있는 UseEffect - 시간 초과, 구독, 이벤트 리스너 또는 구독을 취소할 수 있는 기타 기능 또는 사용 후 필요하지 않으며 정리 기능으로 폐기할 수 있습니다.

위 내용은 UseEffect React의 비하인드 스토리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!