React JS의 컴포넌트 라이프 사이클 메소드 란 무엇입니까?

우리 모두와 마찬가지로 React 구성 요소도 탄생하고 성장하고 죽습니다!

(Habilelabs) (2020 년 12 월 7 일)

작성자 : Payal Mittal

reactjs의 컴포넌트 라이프 사이클 메소드
React.js의 컴포넌트 라이프 사이클 메소드

모든 React 클래스 컴포넌트는 일련의” 수명주기 방법”. 기본적으로 React의 모든 것은 구성 요소 또는 구성 요소의 일부로 구성됩니다.

이러한 구성 요소는 지구상의 모든 생물과 거의 같은 특정 수명주기를 따릅니다. 그들은 태어나고 자라다가 마침내 죽습니다. 태어날 때의 단계를 마운트라고하고, 성장할 때를 업데이트라고하며, 마지막 죽음 단계를 마운트 해제라고합니다.

이 전체 프로세스를 구성 요소 수명주기라고합니다. 이러한 각 단계에서 React.js는 애플리케이션 내 구성 요소의 동작을 제어하는 ​​수명주기 메서드라고하는 특정 내장 메서드를 렌더링합니다.

이 블로그에서는이 수명주기를 살펴보고 수명주기 방법에 대해 알아보기-

구성 요소 수명주기 방법이란 무엇입니까?

구성 요소 수명주기 방법은 다음과 같이 세 단계로 나뉩니다.

  • 마운팅
  • 업데이트
  • 마운트 해제

전체 구성 요소 수명주기는이 간단한 시각적 그림으로 이해할 수 있습니다.-

구성 요소 수명주기 다이어그램

이제 각 단계와 그 방법에 대해 자세히 설명하겠습니다. 그럼 시작하겠습니다.-

✔ 수명주기 방법 마운트

구성 요소 완료 후 초기화, 컴포넌트 마운팅은 컴포넌트가 생성되고 DOM에 삽입되는 시점에서 시작됩니다.

여기서 가장 일반적으로 사용되는 라이프 사이클 메소드에 대해 설명합니다.

1. constructor ()

마운팅이 시작되기 전에 먼저 constructor()가 호출되며 기본적으로이 둘을 제공하는 데 사용됩니다. 목적-

  • 구성 요소의 로컬 상태를 초기화하려면
  • 이벤트 처리 메서드를 인스턴스로

setState(), constructor 메서드에서 초기 상태를 this.state()에 직접 할당 할 수 있습니다. 상태를 정의하는 방법은 다음과 같습니다.

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

다음은 render() 메서드입니다! 컴포넌트를 DOM에 마운트하고 UI에 렌더링합니다. 이 메소드는 구성 요소의 state 에 변형이있을 때마다 this.statethis.props 속성을 ​​검사하기 위해 호출됩니다. div> 또는 props.

render는 React에서 가장 일반적으로 사용되는 방법입니다. DOM에서 요소를 렌더링하려는 경우 여기에 작성할 수 있으므로 render() 가 기대할 수있는 방법입니다.

호출 될 때마다 반환 할 수 있습니다. 다양한 유형, 즉 문자열, 숫자, 배열, 조각, 부울 또는 null 값, 포털 또는 React 요소. 여기에 몇 가지 예가 나와 있습니다.-

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

참고 : componentShouldMount 메서드가 부울 false를 반환하면 렌더링 메서드가 호출되지 않습니다.

3. componentDidMount ()

이 메소드는 render 메소드를 통해 구성 요소가 DOM에 삽입 된 직후에 호출됩니다. . 수명주기에서 한 번만 호출됩니다.

  • 구독을 설정하려는 경우이 방법을 사용하는 것이 좋습니다. 그러나 componetWillUnmount()에서 구독을 취소해야합니다.
  • 또한 원격에서 데이터를로드해야하는 경우 네트워크 요청을 인스턴스화하기에 좋은 곳입니다.
  • 여기에서 setState() 를 호출 할 수도 있습니다. 렌더링이 다시 트리거되지만 최소한 중간 상태는 표시되지 않습니다. 단, 성능 문제가 발생하므로 사용시주의해야합니다. 실제로 권장되는대로 constructor() 메서드에서 초기 상태를 할당해야합니다. 그러나이 접근 방식은 크기에 따라 다른 것을 렌더링하기 전에 DOM 노드를 측정해야 할 때 유용합니다.

✔ 수명주기 방법 업데이트

마운팅 단계가 구성 요소를 마운트하는 동안 한 번만 발생하면업데이트 중 단계가 여러 번 발생할 수 있습니다.

업데이트해야하는 구성 요소의 소품 / 상태가 변경 될 때마다 타이머가 호출합니다. render componentDidupdate 변경 사항을 확인, 업데이트 및 렌더링하려면 업데이트 단계가 시작됩니다.

1. static getDerivedStateFromProps ()

업데이트 수명주기 단계에서 호출되는 첫 번째 메서드입니다. render 메소드가 시작될 때마다 호출되기 때문에 여러 번 호출 할 수 있습니다. 따라서 마운트 및 업데이트 단계에서 모두 호출되는 것이 분명합니다.

이 메서드는 그다지 일반적이지 않으며 시간이 지남에 따라 구성 요소의 상태가 props의 변화에 ​​따라 달라지는 특정 경우에는 거의 사용되지 않습니다. 이름에서 알 수 있듯이 props에서 상태를 가져옵니다.

2. shouldComponentUpdate ()

이 메서드는 구성 요소가 다시 렌더링 될 때 호출됩니다. states / props 의 현재 변경 사항이 구성 요소의 출력에 영향을 미치는지 여부를 결정합니다. 이는 성능 최적화 수단으로 만 사용되며 부울 true 또는 false 값. 기본적으로 true를 반환합니다.

shouldComponentUpdate()false value, 이는 React에이 업데이트를 건너 뛰도록 지시한다는 의미이므로 render componentDidUpdate 메서드가 호출되지 않습니다.

p>

shouldComponentUpdate 메서드 작동

그러나 내장 된

React.PureComponent 새롭고 오래된 state / props 를 비교할 수 있으며 필요한 업데이트를 건너 뛸 가능성이 거의 없습니다.

3. render ()

다음은 render입니다. 호출 여부는 shouldComponentUpdate에서 반환 된 값에 따라 다릅니다. true 가 반환 된 경우에만 트리거됩니다.

4. getSnapshotBeforeUpdate ()

render 가 호출 된 후

getSnapshotBeforeUpdate 다음에 온다. 일반적으로 사용되지는 않지만 DOM의 일부 정보에 액세스하고 업데이트 한 직후 변경해야하는 경우와 같은 특정 경우에 매우 유용합니다.

이 방법을 사용하면 구성 요소가 DOM에서 일부 정보 (스크롤 높이)를 캡처하여 나중에 (업데이트 후) 조정할 수 있습니다. 하지만 여기에 캡처 된 스크롤 높이가 DOM으로 업데이트되기 높이를 나타냄을 이해해야합니다.

prevState prevProps 여기에 제공된 인수로-

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

이 메서드는 구성 요소가 업데이트되고 다시 렌더링 된 직후 호출됩니다. 매개 변수로 prevState prevProps 를 수신하고 새로 변경된 상태 또는 소품에도 액세스 할 수 있습니다.

그러나, 이 함수 내에서 상태를 직접 설정하지 않는 것이 좋습니다. 그렇지 않으면 render componentDidUpdate가 추가로 트리거됩니다.

이 방법을 통해 scrollHeight 업데이트 후 이전과의 차이점을 계산할 수 있습니다.

이것은 단 하나의 사용 사례입니다. –

👉 서버에서 데이터 가져 오기

👉 React 구성 요소의 DOM 노드에 액세스하기

사용 사례에 대한 세부 정보 가져 오기 , 공식 문서를 확인하세요.-

React.Component-React

이 페이지에는 React 컴포넌트 클래스에 대한 자세한 API 참조가 포함되어 있습니다. 정의. “숙지 …

reactjs.org

✔ 수명주기 메소드 마운트 해제

이것은 반응 구성 요소가 DOM에서 마운트 해제되고 파괴되는 마지막 단계입니다.이 단계에는 수명주기 메서드가 하나뿐입니다.

1. componentWillUnmount ()

componentWillUnmount 메소드는 컴포넌트가 파괴되기 직전에 마운트 해제 단계에서 먼저 호출됩니다.여기에서 기본적으로 네트워크 요청 취소, 타이머 무효화 또는 componentDidMount 방법으로 생성 된 원하지 않는 구독을 정리하는 등 모든 정리 방법을 수행 할 수 있습니다.

요약 :

A에서 오류가 발생하는 경우 호출되는 다른 메소드가 있습니다. 이러한 메서드를 오류 처리 수명주기 메서드라고합니다. 여기 에서 찾을 수 있습니다.

모두 코더였습니다 !! 이 블로그를 통해 React 구성 요소의 수명주기 방법에 대해 더 잘 이해하기를 바랍니다. 다른 유용한 블로그를 통해 곧 다시 확인하세요.

Till 그럼 즐거운 시간 되세요 !! 🙃

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다