React useEffect를 사용하는 방법

React 개발팀은 React 버전 16.8에서 Hooks 개념을 도입했습니다. React Hook을 사용하면 함수 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있습니다. 후크 useState를 사용하면 함수 구성 요소는 클래스 구성 요소로 다시 작성할 필요 없이 자체 내부 상태를 설정할 수 있습니다.

React 클래스와 기능적 구성 요소의 차이점을 검토하려면 이 가이드를 확인하세요.

React에서 널리 사용되는 또 다른 Hook은 useEffect입니다. useEffect를 사용하면 기능적 구성 요소의 컨텍스트에서 부작용(또는 "효과")이 수행됩니다. JavaScript 함수에서도 부작용이 발생한다는 것을 기억하십시오.

부작용은 함수가 신체 외부에서 무언가를 변경할 때 발생합니다. React에서도 마찬가지이며 데이터 가져오기, 구독을 포함하거나 이전에 React 구성 요소에서 DOM을 변경할 수 있습니다.

useEffect가 무엇인가요?

React Hook useEffect를 사용하면 기능적 구성 요소가 부작용을 수행할 수 있습니다. React 클래스 구성 요소의 수명 주기 메서드 componentDidMount, componentWillUpdate 및 componentWillUnmount와 유사한 방식으로 작동합니다. 자세한 내용은 React 수명 주기 방법에 대한 이 소개를 참조하세요.

이 기사에서는 Hooks 사용을 시작하는 방법에 대한 기본 예제를 볼 것입니다. 이 기사의 의도는 심층 분석이 아니라 소개 역할을 하는 것입니다. useEffect를 포괄적으로 보려면 React Hooks에 익숙해지면 이 개요를 읽어보세요.

반응 후크 구문

useEffect를 이해하려면 먼저 useState Hook의 구문을 간략하게 살펴봐야 합니다. Hooks를 사용할 때 React를 가져오는 것처럼 Hooks를 가져와야 합니다.

'react'에서 React, { useState, useEffect } 가져오기

이제 내부에 Hooks를 사용하여 기능적 구성 요소를 정의할 수 있습니다. 이것은 JavaScript 함수 범위를 사용하고 있습니다. 기능 구성 요소 내부에 useEffect 후크를 정의하면 범위를 통해 상태 및 소품에 액세스할 수 있습니다. 범위에 대한 자세한 내용은 이 입문서를 검토하십시오.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

useState 구문

명확성을 위해 예제에 간단한 카운터를 사용하겠습니다. 버튼을 클릭한 횟수를 DOM에 출력합니다. 가져오기가 완료된 기능 구성 요소는 다음과 같습니다.

import React, {useState, useEffect} from 'react' import ReactDOM from 'react-dom' const ButtonCounter =() => { return (  ) } ReactDOM.render( , document.getElementById('컨테이너'));

이것은 우리의 버튼을 DOM으로 렌더링합니다. useEffect를 정의하기 전에 useState Hook을 정의하여 초기 상태를 설정할 수 있습니다.

const [count, setCount] =useState(0);

이 구문을 사용하여 React는 첫 번째 변수를 초기 상태로 설정합니다. 이 경우 변수 "count"는 useState에 전달된 인수에 의해 설정됩니다. React는 count의 초기 상태를 0으로 설정했습니다. 두 번째 변수는 count를 업데이트하는 함수로 사용됩니다.

이제 count의 초기 상태를 0으로 설정했으므로 setCount 함수를 사용하여 상태를 업데이트할 수 있습니다.

const ButtonCounter =() => { const [count, setCount] =useState(0); return (  
버튼을 {count}번 클릭했습니다.
  
 )} 
 onClick 속성에 대한 콜백 함수로 setCount를 사용하여 버튼을 클릭할 때마다 DOM을 업데이트할 수 있습니다. 
 
  
 이것은 useState로 초기 상태를 설정할 때 정의된 setCount 함수가 작동 중임을 의미합니다! 이제 useState Hook의 구문을 보았으므로 useEffect를 살펴보겠습니다. 
 useEffect 구문
 
 앞서 언급했듯이 useEffect는 부작용의 사용을 정의합니다. 데이터 가져오기 및 수동 DOM 변경을 통한 구성 요소 변경은 부작용을 구성합니다. useEffect Hook은 구성 요소가 렌더링될 때마다 호출됩니다. 
 
 
 React 클래스 구성 요소의 componentDidMount 및 componentDidUpdate와 유사하게 작동합니다. 카운터 예제를 진행하면서 

 요소에 이름을 표시하여 useEffect가 DOM을 업데이트하도록 할 것입니다. 
 
  const [카운트, setCount] =useState(0); const [이름, 집합 이름] =useState(" "); useEffect(() => { setName(name + "Ryan") }) return (  
안녕하세요 {name}! {count}번 클릭했습니다.
  
 )}
 
 이것은 의도적으로 잘못 코딩되었습니다. DOM에 푸시되는 것은 구성 요소의 각 렌더링과 함께 useEffect가 호출된다는 것을 증명합니다. 
 
  
 이것은 기본적으로 useEffect Hook이 componentDidMount와 componentWillUpdate의 조합처럼 동작하기 때문에 발생합니다. 
 
 
 컴포넌트가 마운트될 때만 렌더링되도록 Hook을 사용자 정의하기 위해 useEffect에 두 번째 인수를 보낼 수 있습니다. useEffect 빈 배열([])을 두 번째 인수로 전달하면 React는 구성 요소가 마운트될 때만 useEffect를 호출한다는 것을 알고 있습니다. 
 
 useEffect(() => { setName(이름 + "라이언") }, [])
 
 이제 기능 구성 요소가 마운트된 후에만 "Ryan" 문자열이 표시되어야 합니다. 
 
  
 엄청난! Hooks 사용에 익숙해지려면 시간이 좀 걸립니다. 이를 염두에 두고 공식 React 문서에는 Hooks 사용에 대한 업데이트된 가이드가 있습니다. 여기에서 읽으십시오. 
 결론
 
 React useEffect Hook에 대한 이 소개에서 우리는 Hook이 무엇이고 어떻게 사용하는지 배웠습니다. 또한 useState 및 useEffect Hooks에 대한 구문을 각각에 대한 기본 예제와 함께 다루었습니다. 
 
 
 Hooks의 잠재적인 용도는 이 입문서에서 다루는 것 이상입니다. 이것을 읽고 자신의 코드에서 시간을 보낸 후 연결된 리소스로 분기하여 React Hooks에 대한 이해를 심화하십시오. 클래스 구성 요소는 아무데도 가지 않지만 Hooks는 React의 미래이므로 최신 정보를 얻고 최신 정보를 얻으세요!