React 구성 요소 수명 주기: 알아야 할 사항 [2022]

게시 됨: 2021-01-06

React에서 응용 프로그램은 구성 요소로 알려진 가능한 가장 작은 조각으로 나뉩니다. 구성 요소는 프리젠테이션 또는 컨테이너일 수 있습니다.

프레젠테이션 구성 요소에 대해 이야기할 때 논리가 없습니다. 구성 요소 내부에 내장되어 있습니다. UI만 있습니다.

컨테이너 구성 요소는 프레젠테이션 구성 요소를 사용하고 구성 요소에 비즈니스 논리가 있는 구성 요소입니다. 이러한 구성 요소는 자신이 담당할 수 있는 많은 사용 사례 중 하나를 달성하기 위해 로컬 상태 개체를 유지해야 하는 경우가 많습니다. 이러한 구성 요소는 표현 구성 요소를 자식 구성 요소로 사용하고 다양한 props를 사용하여 데이터를 전달합니다.

React를 사용하면 클래스 또는 기능 구성 요소를 가질 수 있습니다. 리액트 생태계에서 널리 사용되는 패턴은 프리젠테이션 구성 요소는 기능적 유형의 구성 요소이고 컨테이너 구성 요소는 클래스 유형이라는 것입니다.

반응 수명 주기 는 구성 요소가 거치는 정확한 프로세스와 반응 구성 요소 수명 주기 뒤에 있는 이유를 보여줍니다 .

목차

기능적 구성요소

상태가 없는 것들로 props를 이용한 조작만 합니다.

모든 구성 요소 수명 주기 메서드 또는 setState 는 이러한 구성 요소 내에서 사용하거나 액세스할 수 없습니다.

확인: 프로젝트 아이디어에 반응하기

클래스 구성 요소

이러한 구성 요소는 로컬 상태를 가질 수 있으며 수명 주기 메서드 및 setState 에 액세스할 수 있습니다 .

반응의 일반적인 클래스 구성 요소는 다음과 같습니다.

구성 요소 수명 주기에는 세 단계가 있습니다.

  1. 설치
  2. 업데이트 중
  3. 마운트 해제

설치

컴포넌트가 생성되어 DOM(Document Object Model)에 삽입될 때 사용되는 메서드는 다음과 같습니다.

● 생성자()

● 정적 getDerivedStateFromProps()

● 렌더()

● componentDidMount()

업데이트 중

구성 요소에 제공된 소품 또는 상태가 변경되면 구성 요소의 다시 렌더링을 업데이트 단계라고도 합니다. 이 단계에서 다음과 같은 수명 주기 메서드가 호출됩니다.

● 정적 getDerivedStateFromProps()

● shouldComponentUpdate()

● 렌더()

● getSnapshotBeforeUpdate()

● componentDidUpdate()

읽기: Vue와 React: Vue와 React의 차이점

마운트 해제

이 메서드는 구성 요소를 마운트 해제하는 동안 호출됩니다.

● 구성 요소 willUnmount()

문서 객체 모델이 파괴되기 전에 호출되는 마지막 함수입니다. componentWillMount 동안 생성된 모든 요소를 ​​정리하는 역할을 합니다.

구성 요소의 오류 처리 목적을 위해 예약된 메서드가 거의 없습니다.

● 정적 getDerivedStateFromError()

● componentDidCatch()

일반적으로 사용되는 수명 주기 방법이 자세히 설명되어 있습니다.

● 생성자(소품)

이 수명 주기 방법은 구성 요소의 장착 단계에서 사용됩니다. 여기에 선언된 지역 상태 객체를 가질 수 있습니다. super(props)는 다른 명령문보다 먼저 생성자 내부에서 호출됩니다. 그렇지 않으면 this.props에 액세스하는 동안 오류가 발생합니다.

로컬 상태 객체를 선언하거나 이벤트 핸들러를 인스턴스에 바인딩하는 것을 목표로 하지 않는 경우 구성 요소의 수명 주기 메서드를 작성할 필요가 없습니다.

생성자()의 호출 상태는 이전 주기가 종료되기 전에 다시 렌더링을 트리거하므로 권장되지 않습니다.

Constructor()는 상태를 직접 할당할 수 있는 유일한 곳입니다. 그렇지 않고 상태를 변경하거나 내부에 무언가를 할당해야 하는 경우 this.setSate 를 사용해야 합니다.

● 렌더()

이 메서드 구성 요소 내부에는 JSX 부분이 작성됩니다. JSX는 HTML과 유사하지만 자바스크립트의 확장된 구문입니다. JSX를 사용할 때 render 메소드 내에서 Javascript 표현식을 사용할 수도 있습니다.

모든 상위 구성 요소의 render() 메서드에는 내부에 하위 구성 요소가 있을 수 있습니다. 반응 구성 요소의 기본이 되는 구성 패턴을 모두 따릅니다.

부모의 렌더 메소드가 호출될 때마다 자식 컴포넌트에 대해서도 렌더가 시작되고 전체 자식 렌더가 완료된 후에야 부모 렌더가 완료됩니다.

렌더링 방법은 필수 방법입니다. 이것이 없으면 컴포넌트의 뷰 부분을 쓸 수 있는 유일한 곳이기 때문에 컴포넌트를 만들 수 없습니다.

렌더링 방법은 순수합니다. 이것은 내부의 상태를 수정할 수 없음을 의미합니다.

업데이트 단계의 모든 구성 요소에 대해 특정 구성 요소에 대한 재렌더링은 shouldComponentUpdate() 수명 주기 메서드 반환 유형 또는 사용에 따라 발생하거나 발생하지 않을 수 있습니다.

이 메서드 내에서 API 호출 및 브라우저와의 상호 작용은 권장되지 않으며 오류가 발생합니다.

● componentDidMount()

이 메서드는 구성 요소가 마운트된 직후에 호출됩니다. 이제 DOM을 추가 조작에 사용할 수 있습니다. 이 메서드 내에서 setState 를 호출할 수 있습니다 .

또한 여기에서 브라우저 또는 API 호출과의 상호 작용을 수행할 수 있습니다.

이 메서드는 생성 시간 동안 한 번만 호출됩니다. 메서드는 더 이상 다시 렌더링되는 부분에서 실행되지 않으며 내부의 논리도 실행되지 않습니다.

● componentDidUpdate()

componentDidMount와 동일합니다.; 컴포넌트의 재렌더링이 발생할 때만 호출된다는 유일한 차이점으로 오류가 발생할 수 있습니다. 이 메서드는 초기 렌더링에 대해 호출되지 않습니다.

setState 및 부작용은 이 메서드 내에서 수행할 수 있습니다. 그러나 setState는 조건으로 래핑되어야 합니다. 그렇지 않으면 렌더 무한 루프에서 끝날 수 있으며 렌더는 결코 끝나지 않을 것입니다.

또한 shouldComponentUpdate()가 false를 반환하면 componentDidUpdate가 호출되지 않습니다.

● componentWillUnmount()

이 메서드는 구성 요소의 마운트 해제 단계가 진행 중일 때 호출됩니다.

메서드 내에서 이상적으로는 이벤트 핸들러를 제거하고 메모리를 정리할 수 있습니다.

setState() 함수는 구성 요소를 다시 렌더링하므로 이 내부에서 호출하면 안 됩니다.

● shouldComponentUpdate()

반응 애플리케이션을 개발하는 동안 컴포넌트의 불필요한 재렌더링을 피해야 하는 경우가 종종 있습니다. 이 클래스 내 구성 요소를 달성하기 위해 위에서 언급한 방법이 있습니다. 이 메서드가 false를 반환하면 구성 요소와 해당 자식 구성 요소를 다시 렌더링하지 않습니다.

이전 props를 확인하고 제공된 새 props와 비교하여 변경 사항이 없는지 확인한 다음 false를 반환할 수 있습니다.

이 내부에서 setState() 메서드를 호출하면 다시 렌더링할 수 있으므로 권장되지 않습니다.

또한 이 방법 내에서 부작용을 수행해서는 안됩니다.

이 방법에 대한 또 다른 대안이 있습니다. 클래스를 확장하는 동안 React.pureComponents를 사용할 수 있습니다. 이것은 shouldComponentUpdate()보다 훨씬 안정적이고 신뢰할 수 있습니다.

마지막으로 오류를 포착하기 위해 존재하는 반응 구성 요소의 오류 경계 유형이 있습니다.

단순히 오류 경계 구성 요소로 구성 요소를 래핑해야 합니다.

이 특수 구성 요소 내부에는 두 가지 수명 주기 방법이 사용됩니다.

  1. 정적 getDerivedStateFromError()
  2. componentDidCatch()

하위 구성 요소에서 오류가 발생하면 둘 다 호출됩니다.

첫 번째 것은 렌더링 단계에서 호출되므로 내부에서 부작용이 허용되지 않습니다. 두 번째 것은 커밋 단계에서 호출되므로 내부에서 부작용이 허용됩니다.

또한 읽기: 인도의 ReactJS 개발자 급여

세계 최고의 대학에서 온라인으로 소프트웨어 엔지니어링 과정을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

결론

리 액트 컴포넌트 라이프사이클 은 코드에 복잡성을 더하지만, 메소드를 통해 수행되는 체계적인 실행 및 조작은 개발자의 관점에서 상당히 매력적으로 보입니다. React 라이프사이클 을 사용하면 구성 요소를 재구성하거나 조작할 수 있습니다.

반응, 전체 스택 개발에 대해 자세히 알아보려면 작업 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트를 제공하는 upGrad 및 IIIT-B의 전체 스택 소프트웨어 개발 Executive PG 프로그램을 확인하십시오. , 과제, IIIT-B 동문 상태, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.

미래의 직업을 위한 준비

풀 스택 개발의 Executive PG 프로그램에 지금 지원하십시오