React hooks에 대해 아직 배우지 않은 React 개발자라면 지금이 바로 그 순간입니다. 이 포스트는 useEffect React Hook에 대해 자세히 다룰 것입니다. 스위스 아미 나이프에 해당하는 후크입니다. 구성 요소가 마운트될 때 데이터를 가져오는 방법, 상태 또는 소품이 변경될 때 코드를 실행하는 방법, 타이머 또는 간격을 설정하는 방법 등과 같은 다양한 문제를 해결합니다.
useEffect는 JSX(모든 유형의 부작용)를 반환하지 않는 React 구성 요소에서 "수행"하려는 거의 모든 작업에 사용됩니다. 또한 구성 요소당 여러 useEffect가 있을 수 있습니다.
이 모든 기능에는 대가가 따릅니다. 작동 방식을 이해하지 못하면 당혹스러울 수 있습니다. 이 게시물에서는 개념적 모델을 파악하고 자신의 코드에 적용할 수 있도록 다양한 예제를 살펴보겠습니다.
반응 고리 – 해결하려는 것은 무엇입니까?
Hooks는 React 버전 16.8에서 처음 도입되었으며 현재 많은 React 프로젝트에서 사용됩니다. Hooks는 컴포넌트 간의 코드 반복 문제를 극복합니다. 클래스를 사용하지 않고 작성됩니다. 이것은 React가 클래스를 포기한다는 것을 의미하지 않습니다. 후크는 단순히 대체 방법입니다.
React를 사용하면 상태 저장 논리를 사용하여 정교한 구성 요소를 빠르게 만들 수 있습니다. 이 클래스는 React Lifecycle Methods에 의존하기 때문에 이러한 구성 요소를 분리하는 것은 어렵습니다. 이것이 React Hooks가 등장하는 곳입니다.
구성 요소를 더 작은 기능으로 나눌 수 있습니다. 수명 주기 방식에 따라 코드를 더 작은 조각으로 나누는 대신 기능에 따라 코드를 더 작은 단위로 배열하고 분리할 수 있습니다.
useEffect 훅이란 무엇입니까?
후크는 ES6 클래스를 작성하지 않고도 상태 및 기타 반응 기능에 액세스할 수 있는 기능입니다. 반응 후크 API에는 useEffect라는 후크가 있습니다. 반응 라이프 사이클에 대해 알고 있다면 useEffect 후크는 구성 요소DidMount, 컴포넌트DidUpdate및 컴포넌트WillUnmount 라이프 사이클 방법이 결합되었습니다.
React Hooks 문서에 따르면 ES6 클래스 구성 요소 수명 주기 메서드의 일부 문제를 해결하기 위해 만들어졌습니다.
통사론
첫 번째 인수는 각 렌더링 후에 기본적으로 실행되는 콜백 함수입니다. 두 번째 매개변수는 대상 상태가 변경된 경우에만 콜백하도록 Hook에 지시하는 선택적 종속성 배열입니다.
Hook은 각 종속성의 과거 및 현재 상태를 비교합니다. 두 값이 일치하지 않으면 Hook은 첫 번째 매개변수에 지정된 콜백을 호출합니다. 종속성 배열은 일반적인 콜백 동작을 변경하고 Hook이 구성 요소 범위의 다른 모든 구성 요소를 무시하도록 합니다.
기본 사용법
메시지를 저장하기 위해 위의 코드 샘플에서 React useState를 사용하고 있습니다. 그런 다음 메시지 상태 변수를 가져와 화면에 인쇄합니다. 그러나 이제 구성 요소가 마운트된 후 XNUMX초 후에 메시지를 수정하기 위해 Effect를 사용하고 싶습니다.
React 프레임워크에서 useEffect를 가져온 후 useState 줄 뒤에 효과를 삽입했습니다. useEffect의 첫 번째 매개변수는 함수입니다. 이 함수 핸들러가 실행되면 사용자가 제공하는 모든 부작용을 처리합니다. 함수는 React 구성 요소 수명 주기 이벤트 중 하나가 발생할 때 호출되는 콜백 함수입니다.
언제 사용합니까?
useEffect 후크는 다양한 상황에서 유용할 수 있습니다. 다음이 가장 중요합니다.
- 제공된 인수에 따라 데이터를 가져오려는 경우 클라이언트 측에서 이 매개변수를 변경할 수 있습니다. 매개변수가 새로운 데이터로 업데이트된 후 호출됩니다.
- API 끝점에서 데이터를 검색하고 클라이언트 측에 표시하려는 경우. 구성 요소가 렌더링될 때 useEffect 후크에 제공된 함수 또는 핸들러가 실행되고 구성 요소 상태의 데이터가 검색됩니다. 이러한 상태는 사용자 인터페이스 구성 요소에 사용됩니다.
- 구성 요소가 외부 세계의 데이터에 의존하고 데이터가 도착하는지 확인할 수 없는 경우 Effect를 사용해야 합니다(서버가 아래에 있을 수 있음). 문제를 일으키고 다른 구성 요소가 표시되지 않도록 하는 대신 useEffect 후크에 배치합니다.
사용 사례
구성 요소가 첫 번째 실행 후 다시 렌더링되면 실행되지 않습니다.
구성 요소가 렌더링되거나 다시 렌더링될 때마다 항상 실행되어야 합니다.
기본적으로 프로그램은 한 번만 실행됩니다. 그 후 prop 값이 변경되면 다음을 실행합니다.
비동기 활동의 경우 항상 useEffect를 사용하십시오.
useEffect 코드 블록은 동료 개발자를 위한 비동기 작업의 명백한 마커입니다. useEffect를 사용하지 않고 비동기식 코드를 생성하는 것은 가능하지만 이것은 "React 메서드"가 아니며 복잡성과 실수의 위험을 모두 증가시킵니다.
UI를 중지할 수 있는 비동기 코드를 작성하는 대신 useEffect를 사용하는 것은 React 커뮤니티에서 잘 알려진 기술입니다. 특히 React 팀이 부작용을 수행하기 위해 빌드한 방식입니다.
이를 활용하는 또 다른 이점은 개발자가 코드를 간단히 검토하고 첫 번째 렌더링 주기 후에만 중요해지는 "제어 흐름 외부에서" 실행되는 코드를 즉시 감지할 수 있다는 것입니다. 또한 블록은 재사용 가능하고 의미론적인 사용자 정의 Hook으로 추출하는 데 적합합니다.
예제
useEffect 코드를 사용하여 초당 숫자를 증가시키십시오.
결론
내 생각에 useEffect Hook의 기본 설계 원칙과 모범 사례를 이해하는 것은 차세대 React 개발자가 되고 싶다면 배워야 할 중요한 기술입니다.
요약하자면 useEffect Hook은 명령형이 포함된 함수를 수신하고 잠재적으로 전체 논리에 영향을 미칩니다. 두 번째 매개변수인 종속성 배열을 사용하여 실행에 영향을 줄 수 있습니다. 이를 처리하면서 return 함수를 사용하여 정리 코드를 작성하는 것도 필요합니다.
기사가 도움이 되었다면 댓글로 알려주세요.
댓글을 남겨주세요.