React useEffect() Hook: 사용법, 사용 방법 및 시기

useEffect() 후크 소개

useeffect는 주요 구성 요소를 연결합니다.데이터 가져오기, 이벤트 리스너 설정 또는 DOM 수정과 같은 작업을 처리하고 사용자가 기능 구성 요소를 사용하여 부작용을 수행할 수 있도록 합니다. 또한 구성 요소 수명 주기를 제어합니다.

useeffect후크는 두 개의 인수, 함수 및 선택적 종속성 배열을 활용합니다.첫 번째 인수로 전달된 함수는 구성 요소의 초기 렌더링 후 실행된 다음 모든 업데이트 후에 다시 실행됩니다. 의존성 배열을 사용하여 효과가 의존하는 변수를 나타낼 수 있습니다. 종속성 배열의 변수가 변경되면 효과의 새로운 실행이 수행됩니다.

본질적으로useeffect 후크는 ES6 클래스 구성 요소의 수명 주기에서 직면한 문제를 해결하기 위해 만들어졌습니다.그러나 이제는 핵심 반응 개념 중 하나가 되었습니다.

react 에서 useeffect 가 무엇인지 에 대한 간략한 설명과 함께 이제 구문을 살펴보겠습니다.

useEffect() 후크의 기본 구문

useEffect는 두 가지 인수를 지원합니다 . 두 번째 인수는 선택 사항입니다. 구문은 다음과 같습니다.

useEffect(<함수>, <의존성>)

함수에는 부작용 논리가 포함되어 있습니다. DOM 업데이트 직후 콜백 실행을 유발합니다.

종속성은 부작용(즉, state 및 props 값)의 선택적 종속성 배열을 포함합니다. 효과사용 후크는 렌더링 중에 종속성이 변경된 경우에만 콜백을 실행합니다.

구문은 useEffect()의 유일한 목적을 제공합니다. 이를 통해 부수 효과 논리를 콜백 함수 내에 배치한 다음 종속성 인수를 사용하여 부수 효과를 실행해야 하는 시기를 제어할 수 있습니다.

useEffect() 후크를 구현할 때 다음 구문을 고려할 수 있습니다.

// useEffect 가져오기

import { useEffect } from 'react';

함수 MyComponent() {

// 반환된 JSX 위에서 호출합니다.

// 두 개의 인수, 즉 배열과 함수를 전달합니다.

useEffect(() => {

// 효과 함수

반환 () => {

// 정리 함수

};

}, [/* 종속성 배열 */]);

// 컴포넌트 렌더링 로직

}

}

무료 기술 과정을확인하여경쟁에서 우위를 점하십시오.

useEffect() 후크로 구성 요소 마운트 및 마운트 해제

설치

React 구성 요소 수명 주기의 초기 단계에는 구성 요소를 만들고 DOM에 삽입하는 작업이 포함됩니다. react useeffect 의 이 수명 주기 단계에는 구성 요소가 마운트될 때 실행되는 componentDidMount 수명 주기 메서드가 포함됩니다.

다음은 useEffect() 후크를 사용하여 구성 요소를 마운트하는 예입니다.

componentDidMount() {

console.log("컴포넌트가 성공적으로 마운트되었습니다.");

this.setState({

로드됨: 참

})

}

위의 예에서 componentDidMount를 사용하면 setState를 사용할 수 있습니다. 따라서 수명 주기 메서드에서 상태를 쉽게 설정하고 변경할 수 있습니다. 해당 메서드는 API 호출을 사용하고 원격 엔드포인트를 호출하며 데이터를 가져옵니다.

마운트 해제

이 react useeffect 수명 주기 메서드는 DOM에서 정리를 처리합니다.DOM에서 구성 요소를 제거하는useeffect 정리 함수 와 같습니다 .React에서는 마운트 해제라고 합니다. 마운트 해제는 단 하나의 라이프사이클 메소드, 즉 componentWillUnmount를 사용합니다. DOM에서 구성 요소를 제거하려고 할 때 호출됩니다.

componentWillUnmount() {

console.log("컴포넌트가 성공적으로 마운트 해제되었습니다.");

}

상태 변경 처리를 위해 use effect() 후크 사용

useeffect 는 모든 렌더링 후에 실행됩니다.또한 상태 변경을 승인하여 특정 코드를 실행하는 데 사용됩니다. useEffect() Hook에 두 번째 인수를 전달하여 효과 실행 시간을 제어할 수 있습니다. 두 번째 인수는 종속성 배열로 작동합니다. 즉, 해당 변수가 변경되면 효과를 다시 실행해야 합니다. 상태는 변수 유형 중 하나입니다.

다음 섹션에서는use effect 후크가 상태 변경을 처리하는 방법을 설명하는 예를 보여줍니다.

예를 들어 "일" 값을 기반으로 부작용을 실행할 수 있습니다. 요일의 값에 따라 인사말이 표시되는 부작용이 있다고 가정합니다. 오늘의 값은 상태 변수에 저장됩니다.

날짜를 선택할 때마다 상태가 업데이트됩니다. 상태 값의 변경으로 인사말 메시지를 업데이트할 수 있습니다. 종속성 배열의 하위 집합으로 상태 변수를 useEffect 후크에 전달해야 합니다.

useEffect(() =>

{

// 부작용

}, [상태]);

위의 useeffect react native 예제에서 상태 변수의 값이 업데이트되면 부작용이 실행됩니다.

인기 있는 소프트웨어 엔지니어링 과정 살펴보기

API 및 네트워크 요청과 함께 useEffect() 후크 사용

API 및 네트워크 요청과 함께 'useEffect()' 후크를 사용하여 서버에서 데이터를 가져오고 오류를 처리할 수 있습니다. 다음은 API와 함께 'useEffect()'를 사용하고 네트워크 오류를 처리하는 방법의 예입니다.

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

함수 MyComponent() {

const [데이터, setData] = useState(null);

const [오류, setError] = useState(null);

useEffect(() => {

비동기 함수 fetchData() {

노력하다 {

const 응답 = await fetch('https://api.example.com/data');

if (!response.ok) {

throw new Error('네트워크 응답이 올바르지 않습니다.');

}

const json = 응답 대기.json();

setData(json);

} 잡기(오류) {

setError(오류);

}

}

가져오기데이터();

}, []);

경우 (오류) {

반환 <div>오류: {error.message}</div>;

}

if (!데이터) {

return <div>로드 중...</div>;

}

반품 (

<사업부>

<p>{데이터.메시지}</p>

</div>

);

}

네트워크 요청 및 API 응답을 처리하는 데 필요한 추가 기능을 포함하도록 이 예제를 수정할 수 있습니다.

고급 useEffect() 후크 기술

고급 사용 효과 반응 기본 기술 중 하나는 암기입니다.함수 호출의 출력이 캐시되는 최적화 기술입니다. 결과적으로useeffect 반환 함수는 동일한 입력이 다시 공급되면 이를 반환합니다.

또 다른 잘 알려진 useEffect() 후크 기술은 useMemo 후크입니다. 값을 계산하고 기억할 수 있습니다. 구문은 다음과 같습니다.

'react'에서 { useMemo } 가져오기

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() 후크 종속성

useEffect() Hook 종속성에는 상태 또는 소품 값을 구성하는 동시에 부작용의 종속성 목록이 포함됩니다. 종속성 인수를 사용하면 구성 요소가 마운트되거나 특정 상태/prop 값이 업데이트되는 것과 같은 일부 구성 요소 수명 주기 이벤트를 포착할 수 있습니다.

종속성 인수를 사용하면 구성 요소의 렌더링 주기에 관계없이 부작용이 호출되는 시간을 제어할 수 있습니다.

useEffect() 후크를 사용한 조건부 렌더링

useEffect Hook을 사용하면 후크 내에 조건을 넣을 수 있습니다. 여기에 예가 있습니다.

useEffect(() => {

if (shouldExecute) {

// (조건 목록)

}

}, [실행해야 함])

shouldExecute 함수에서 실행하려는 필수 조건을 언급해야 합니다.

effect() 후크 대 ComponentDidMount() 및 ComponentDidUpdate() 사용

useEffect() 후크 대 componentDidUpdate():

useEffect() 후크 대 componentDidMount():

useEffect() 후크의 일반적인 실수 및 모범 사례.

흔한 실수

1. 종속성을 정의하지 않음

useEffect는 구성 요소가 렌더링될 때마다 실행됩니다. 따라서 다시 렌더링을 트리거해야 하는 값을 정의해야 합니다. 그렇지 않으면 useEffect 함수로 인해 성능 문제가 발생할 수 있습니다.

2. useEffect 후크를 실행한 후 정리하지 않음

useEffect는 구성 요소가 마운트 해제될 때 실행되는 정리 함수를 반환할 수 있습니다. useEffect 후에 정리하지 않으면 메모리 누수 및 기타 문제가 발생할 수 있습니다. 따라서 useeffect 정리 기능을 사용하는 것이 중요합니다 .

3. 의존성 없이 useEffect 함수에서 setState 사용하기

useEffect에서 상태를 업데이트하면 다른 렌더링이 트리거됩니다. 이로 인해 무한 루프가 발생할 수 있습니다. 이를 방지하려면 업데이트하려는 상태 변수를 useEffect 후크의 종속성으로 항상 정의해야 합니다.

소프트웨어 개발 무료 과정 살펴보기

모범 사례:

• useEffect 후크를 사용하려면 컴포넌트당 하나만 사용하십시오. 여러 useEffect 후크의 경우 구성 요소가 렌더링될 때마다 모두 실행됩니다. 따라서 성능 문제와 예기치 않은 동작이 발생할 수 있습니다.
• 조건, 루프 또는 중첩 함수 내에서 useEffect 후크를 사용하지 않도록 합니다. for 루프 내에서 State를 사용하면 React는 루프가 실행될 때마다 새로운 상태 변수를 생성합니다. 따라서 예기치 않은 동작이 발생합니다.
• useEffect 후크를 남용하지 않도록 하십시오. 코드를 읽기 어렵게 만들 수 있으며 과도하게 사용하면 성능에 영향을 줄 수 있습니다.
• React 함수에서만 useEffect 후크를 호출해야 합니다. 클래스 구성 요소에서 호출하면 오류가 표시됩니다.

결론

추가 코드를 작성하지 않고 컴포넌트의 props 및 state에 쉽게 액세스하려면 react에서 useeffect를 사용하는 것이 가장 좋습니다 .상태 또는 소품이 변경될 때 부작용을 더 쉽게 실행할 수 있으므로 구성 요소의 부작용을 크게 단순화합니다. React 구성 요소가 최적의 성능을 발휘하도록 위에서 설명한 측면과 모범 사례를 고려할 수 있습니다.

요구되는 소프트웨어 개발 기술을 배우는 것은 현 시대에 매우 중요합니다. LJMU에서 upGrad의 컴퓨터 과학 석사 과정을 이수하면 이러한 첨단 기술을 갖추게 됩니다 . 이 과정은 Java, Python 및 관련 분야의 전문화와 같은 기술을 전수하여 전문 소프트웨어 개발자로 만듭니다. 이 과정에서 다루는 측면을 철저히 학습하면 자바스크립트 개발자, 소프트웨어 엔지니어 및 백엔드 엔지니어와 같은 직업 기회를 탐색하는 데 도움이 됩니다.

upGrad는 소프트웨어 개발 기술 습득과 함께 IIITB의 풀 스택 개발의 Executive PG Program 및 풀 스택 소프트웨어 개발 부트캠프와 같은 과정을 통해 풀 스택 개발자로서의 경력을 향상시킬 수 있도록 도와줍니다 . 이 프로그램은 지원자가 까다로운 풀스택 개발 기술을 습득하고 성공적인 경력으로 가는 길을 효과적으로 닦을 수 있는 몰입형 학습 플랫폼을 제공합니다!