React ライフサイクル メソッド

React では、ライフサイクル メソッドは、コンポーネントの存在のさまざまな段階で呼び出される特別なメソッドです。これらを使用すると、マウント、更新、アンマウントなどのさまざまな段階でコンポーネントに何が起こるかを制御できます。 React 16.8 での React Hooks の導入により、関数コンポーネントも独自の副作用を管理できるようになりましたが、クラス コンポーネントではライフサイクル メソッドが依然として重要です。ここでは、最も一般的に使用されるライフサイクル メソッドを詳しく説明します:

取り付け

React のマウントフェーズとは、コンポーネントが作成されて DOM に挿入されるプロセスを指します。このフェーズには、特定の順序で呼び出される一連のライフサイクル メソッドが含まれており、開発者はコンポーネントがレンダリングされる前に初期化および構成できるようになります。ここでは、実装フェーズの各メソッドを実行順に詳しく説明します:

1.コンストラクター(小道具)

目的:

• コンストラクターは、コンポーネント インスタンスの作成時に呼び出される最初のメソッドです。これは、コンポーネントの状態を初期化し、イベント ハンドラーをバインドするために使用されます。

• コンストラクターでは、オブジェクトを this.state に直接割り当てることで初期状態を設定できます。また、コンポーネントが正しく初期化されていることを確認するために、通常は super(props) を使用して props を基本コンポーネント クラスに渡します。

例:

メモ:

• コンストラクターはコンポーネントのライフサイクル中に 1 回だけ呼び出されます。

• コンストラクターでの副作用 (ネットワーク リクエストやサブスクリプションなど) を回避し、それらのタスクをコンポーネント DidMount 用に予約する必要があります。

2. 静的 getDerivedStateFromProps(props, state)

目的:

• これは、初期マウント中と更新中の両方で、レンダリングの直前に呼び出される静的メソッドです。これにより、コンポーネントは props の変更に基づいて状態を更新できます。

• 状態を更新するオブジェクトを返すか、状態の更新が必要ない場合は null を返します。

例:

メモ:

• React のデータ フローは通常、props を直接渡すことによって処理されるため、このメソッドが必要になることはほとんどありません。

• 状態を props から導出する必要がある特別な場合に使用されます。

3.render()

目的:

• render メソッドは、クラス コンポーネントで唯一必要なライフサイクル メソッドです。 React 要素を返すことで、コンポーネントの UI がどのように見えるかを決定します。

• このメソッドは純粋です。つまり、コンポーネントの状態を変更したり、DOM とやり取りしたりすべきではありません。

例:

メモ:

• render メソッドは、JSX 要素、配列、フラグメント、ポータル、文字列、数値、null などのさまざまな値を返すことができます。

• レンダリングは純粋であるため、このメソッド内での副作用や状態の変更を避けてください。

4.componentDidMount()

目的:

• このメソッドは、コンポーネントがマウントされた (つまり、DOM に挿入された) 直後に呼び出されます。 API からのデータの取得、サブスクリプションの設定、サードパーティ ライブラリの初期化などの副作用を実行するのに最適な場所です。

• componentDidMount はマウント段階で呼び出される最後のメソッドであり、あらゆる DOM 操作に最適です。

例:

メモ:

• componentDidMount は最初のレンダリング後に呼び出されるため、その中の状態を更新すると再レンダリングがトリガーされます。これは、データをフェッチするとき、または DOM と対話するときによく発生します。

• ここでサブスクリプションまたはイベント リスナーを設定する場合は、メモリ リークを避けるために、componentWillUnmount でそれらをクリーンアップすることを忘れないでください。

更新中

React の更新フェーズとは、コンポーネントの状態やプロパティの変更によりコンポーネントが再レンダリングされるときのプロセスを指します。このフェーズでは、いくつかのライフサイクル メソッドが特定の順序で呼び出され、コンポーネントがこれらの変更にどのように反応するかを制御できるようになります。ここでは、更新フェーズに含まれる各メソッドを実行順に詳しく説明します。

1. 静的 getDerivedStateFromProps(props, state)

目的:

• 이 정적 메서드는 새 prop이나 상태가 수신될 때 구성 요소를 렌더링하기 직전에 호출됩니다. 이를 통해 구성 요소는 소품의 변경 사항에 따라 내부 상태를 업데이트할 수 있습니다.

• 상태를 업데이트하는 객체를 반환하거나 업데이트가 필요하지 않은 경우 null을 반환합니다.

예:

참고:

• 이 방법은 상태를 props와 동기화해야 하는 시나리오에 유용합니다.

• 업데이트할 때마다 호출되므로 여기서는 과도한 계산을 피하세요.

2. shouldComponentUpdate(nextProps, nextState)

목적:

• 이 메소드는 새로운 prop이나 state가 수신될 때 렌더링 전에 호출됩니다. 이를 통해 구성 요소를 업데이트해야 하는지 여부를 제어할 수 있습니다. true(기본값)를 반환하면 구성 요소가 업데이트된다는 의미입니다. false를 반환한다는 것은 그렇지 않다는 것을 의미합니다.

• 불필요한 재렌더링을 방지하여 성능을 최적화하는 데 주로 사용됩니다.

예:

참고:

• 이 메소드는 초기 렌더링 중이나 forceUpdate() 사용 시 호출되지 않습니다.

• 신중하게 다루지 않으면 성능 문제나 버그가 발생할 수 있으므로 복잡한 논리는 피하세요.

3. 렌더링()

목적:

• render 메소드는 구성요소의 현재 상태와 props를 기반으로 가상 DOM의 다음 버전을 생성하기 위해 호출됩니다.

• 순수합니다. 즉, 구성 요소 상태를 수정하거나 DOM과 상호 작용하면 안 됩니다.

예:

참고:

• 렌더링은 순수하므로 모든 상태 또는 prop 변경 사항은 반환된 JSX에 반영되어야 합니다.

• 렌더링 내에서 부작용(DOM을 직접 수정하거나 네트워크 요청 등)을 피하세요.

4. getSnapshotBeforeUpdate(prevProps, prevState)

목적:

• 가상 DOM의 변경 사항이 실제로 실제 DOM에 반영되기 직전에 호출되는 메소드입니다. 잠재적으로 변경되기 전에 일부 정보(예: 현재 스크롤 위치)를 캡처할 수 있습니다.

• 이 메소드에서 반환된 값은 componentDidUpdate의 세 번째 인수로 전달됩니다.

예:

참고:

• 이 방법은 업데이트 중에 스크롤 위치를 유지하는 등 DOM이 변경되기 전에 DOM에 대한 정보를 캡처하는 데 특히 유용합니다.

• ComponentDidUpdate와 함께 사용되는 경우가 많습니다.

5. componentDidUpdate(prevProps, prevState, snapshot)

목적:

• 이 메소드는 업데이트가 발생한 후 즉시 호출됩니다. 업데이트에 따른 DOM 작업, 네트워크 요청 또는 기타 부작용을 수행하기에 좋은 장소입니다.

• 이전 props와 상태는 물론 getSnapshotBeforeUpdate에서 반환된 값(있는 경우)도 받습니다.

예:

참고:

• 이 방법은 DOM이 업데이트된 후 발생해야 하는 작업을 수행하는 데 유용합니다.

• 업데이트의 무한 루프를 방지하기 위해 조건으로 래핑되지 않는 한, componentDidUpdate 내에서 상태를 설정하지 마세요.

마운트 해제

React의 마운트 해제 단계는 구성 요소가 DOM에서 제거될 때 발생합니다. 이 단계에는 구성 요소가 삭제되기 전에 필요한 정리 작업을 수행할 수 있는 단일 수명 주기 방법이 있습니다. 구성 요소가 제거된 후에도 지속될 수 있는 메모리 누수, 이벤트 리스너 또는 기타 부작용을 방지하려면 이 단계를 적절하게 처리하는 것이 중요합니다.

1. 컴포넌트WillUnmount()

목적:
componentWillUnmount는 구성 요소가 마운트 해제되고 삭제되기 직전에 호출됩니다. 이 방법은 다음과 같은 정리 활동에 사용됩니다.

• 네트워크 요청을 취소하는 중입니다.

• 타이머 또는 간격 지우기

• 이벤트 리스너를 제거하는 중입니다.

• 구독 정리(예: Redux, WebSocket 등에서).

• commentDidMount 또는 기타 수명 주기 방법에서 발생한 부작용을 무효화하거나 정리합니다.

예:

이 예에서는:

• 구성 요소가 마운트되면(comComponentDidMount) 타이머가 시작됩니다.

• 구성 요소가 DOM에서 제거된 후에 타이머가 계속 실행되지 않도록 하기 위해 componentWillUnmount에서 타이머가 지워집니다. 이는 잠재적인 메모리 누수나 예상치 못한 동작을 방지하는 데 중요합니다.

주요 고려 사항:

• 메모리 누수 방지: componentDidMount에서 이벤트 리스너나 간격을 설정한 경우, 메모리 누수를 방지하려면 componentWillUnmount에서 이를 제거해야 합니다. 그렇지 않으면 애플리케이션이 시간이 지남에 따라 더 많은 메모리를 소비하거나 예기치 않게 동작할 수 있습니다.

• 구독 정리: 구성 요소가 외부 데이터 소스(Redux 스토어, Firebase, WebSocket 연결 등)를 구독하는 경우, componentWillUnmount에서 구독을 취소해야 합니다. 이렇게 하면 구성 요소가 제거된 후 해당 소스의 업데이트에 더 이상 반응하지 않습니다.

• setState 없음: 컴포넌트가 곧 소멸될 예정이므로, componentWillUnmount 내에서 setState를 호출하면 안 됩니다. 이렇게 하면 구성 요소가 다시 렌더링되지 않으므로 아무런 효과가 없습니다.

• 비동기 정리: 정리에 비동기 작업(예: 네트워크 요청 취소)이 포함된 경우 경쟁 조건을 피하거나 더 이상 작동하지 않는 구성 요소와 상호 작용을 시도하지 않도록 해당 작업이 올바르게 처리되었는지 확인하세요. 존재합니다.

일반적인 사용 사례:

• 타이머 및 간격: 구성 요소가 마운트 해제된 후 실행되지 않도록 setTimeout 또는 setInterval 인스턴스를 지웁니다.

• 이벤트 리스너: 구성 요소가 마운트 해제된 후 실행되지 않도록 창, 문서 또는 DOM 요소에 연결된 이벤트 리스너를 제거합니다.

• 구독: 데이터 스트림 또는 외부 서비스(예: WebSocket, Firebase, Redux 스토어) 구독 취소

• 네트워크 요청: 요청이 완료되기 전에 구성 요소가 마운트 해제되면 진행 중인 네트워크 요청을 취소합니다. 이는 취소 토큰을 제공하는 Axios와 같은 라이브러리를 사용하여 수행할 수 있습니다.

모범 사례:

• 컴포넌트DidMount 또는 다른 수명 주기 메서드에서 설정된 경우에는 컴포넌트WillUnmount에서 부작용을 항상 정리하세요.

• 마운트 해제된 구성 요소와 실수로 상호 작용하지 않도록 비동기 작업에 주의하세요.

• ComponentWillUnmount가 호출된 후에도 구성 요소가 계속 존재한다고 가정하는 논리를 사용하지 마세요.

오류 처리

React의 오류 처리 단계는 렌더링 중, 수명 주기 메서드 및 구성 요소 아래 전체 트리의 생성자에서 발생하는 오류를 포착하고 처리하도록 설계되었습니다. 이는 오류 경계로 알려진 클래스 구성 요소의 특수 수명 주기 메서드를 사용하여 수행됩니다.

오류 경계 개요

• 오류 경계는 하위 구성 요소 트리의 어느 위치에서나 JavaScript 오류를 포착하고 해당 오류를 기록하며 전체 애플리케이션을 충돌시키는 대신 대체 UI를 표시하는 React 구성 요소입니다. 이렇게 하면 오류가 애플리케이션 루트로 전파되는 것을 방지하여 앱의 복원력이 더욱 향상됩니다.

1. 정적 getDerivedStateFromError(오류)

목적:

• 이 정적 메서드는 렌더링 단계, 수명 주기 메서드 또는 하위 구성 요소의 생성자에서 오류가 발생할 때 호출됩니다.

• 다음 렌더링에 대체 UI가 표시되도록 상태를 업데이트할 수 있습니다.

사용법:

• 메서드는 매개변수로 발생한 오류를 수신하고 구성요소의 상태를 업데이트하는 객체를 반환합니다.

• 이 방법으로 상태를 설정하면 사용자에게 문제가 발생했음을 알리는 대체 UI를 렌더링할 수 있습니다.

예:

참고:

• 이 방법을 사용하면 오류가 발생할 때 렌더링되는 내용을 제어할 수 있습니다. 예를 들어 일반 오류 메시지나 사용자 정의 오류 구성 요소를 렌더링하도록 선택할 수 있습니다.

• 일반적으로 대체 UI 렌더링을 트리거할 수 있는 오류 상태를 설정하는 데 사용됩니다.

2. componentDidCatch(오류, 정보)

목적:

• 이 메서드는 하위 구성 요소에서 오류가 발생한 후에 호출됩니다. 오류 정보를 기록하거나 오류 추적 서비스에 오류를 보고하는 등의 부작용을 수행하는 데 사용됩니다.

• getDerivedStateFromError와 달리 이 메소드를 사용하면 오류에 대한 추가 세부정보와 오류가 발생한 구성 요소 스택 추적을 캡처할 수 있습니다.

사용법:
이 메소드는 두 개의 인수를 받습니다:

• error: 발생한 오류입니다.

• info: 어떤 구성 요소에서 오류가 발생했는지에 대한 정보가 포함된 문자열을 포함하는 componentStack 속성이 있는 객체입니다.

예:

참고:

• comComponentDidCatch는 오류를 기록하거나 모니터링 서비스(예: Sentry, LogRocket)로 보내는 데 특히 유용합니다.

• getDerivedStateFromError는 대체 UI 렌더링에 도움이 되는 반면, componentDidCatch는 오류 세부 정보 캡처 및 로깅에 중점을 둡니다.

오류 경계를 사용하는 방법

• 구성 요소 래핑: 오류 경계를 사용하여 구성 요소 또는 구성 요소 집합을 래핑할 수 있습니다. 이는 전체적으로(예: 전체 애플리케이션 주위) 수행하거나 보다 선택적으로(예: 오류가 발생하기 쉬운 구성 요소 주위) 수행할 수 있습니다.

예:

이 예에서 ErrorBoundary는 MyComponent를 래핑합니다. MyComponent 또는 해당 하위 요소에서 오류가 발생하면 ErrorBoundary가 오류를 포착하고 대체 UI를 표시합니다.

주요 고려사항:

오류 경계는 다음 시나리오에서 오류를 포착합니다.

• 렌더링 중.

• 수명 주기 메서드(클래스 구성 요소의 메서드 포함)

• 하위 구성 요소 생성자

다음 시나리오에서는 오류 경계가 오류를 포착하지 않습니다.

• 이벤트 핸들러(이벤트 핸들러 자체 내에서 try/catch 블록을 사용하여 오류를 포착할 수 있음).

• 비동기 코드(예: setTimeout, requestAnimationFrame).

• 서버측 렌더링.

• 오류 경계 자체에 오류가 발생합니다(단, 오류 경계를 중첩하여 이러한 오류를 포착할 수도 있음).

모범 사례:

• 오류 경계를 사용하여 작고 개별적인 오류로 인해 전체 앱이 충돌하는 것을 방지하세요.

• 타사 구성요소나 복잡한 로직을 처리하는 구성요소 등 앱에서 오류가 발생할 가능성이 있는 부분에 오류 경계를 배치하세요.

• 오류 경계가 사용자 친화적인 대체 UI를 제공하여 사용자에게 문제가 발생했음을 알리는지 확인하세요.

이러한 수명 주기 방법을 이해하면 React 구성 요소의 상태, 속성 및 부작용을 더 잘 관리하는 데 도움이 됩니다.

Functional Component의 라이프사이클 메소드

기능적 구성 요소에서 React의 useEffect 후크는 부작용 및 수명 주기 방법을 처리하는 주요 방법입니다. useEffect 후크는 구성요소DidMount, 구성요소DidUpdate 및 구성요소WillUnmount와 같은 클래스 구성요소 수명주기 메서드와 유사한 동작을 복제할 수 있습니다. useEffect의 작동 방식과 이러한 수명 주기 메서드와의 관계에 대한 자세한 분석은 다음과 같습니다.

기본 구문

• 첫 번째 인수(효과): 부작용 논리를 배치하는 함수입니다. 이 함수는 구성 요소가 마운트 해제되거나 효과가 다시 실행되기 전에 리소스를 정리하기 위해 정리 함수를 반환할 수 있습니다.

• 두 번째 인수(종속성): 효과를 다시 실행해야 하는 시기를 결정하는 종속성 배열입니다. 이 배열의 값 중 하나라도 변경되면 효과가 다시 트리거됩니다.

useEffect를 componentDidMount로 사용

(구성 요소가 마운트된 후 한 번 실행되는) componentDidMount의 동작을 복제하려면 빈 종속성 배열 []과 함께 useEffect를 사용할 수 있습니다.

예:

• 동작: 효과는 클래스 구성 요소의 componentDidMount와 유사하게 초기 렌더링 후에 한 번만 실행됩니다.

useEffect를 componentDidUpdate로 사용

ComponentDidUpdate를 모방하려면 종속성과 함께 useEffect를 사용합니다. 종속성이 변경될 때마다 효과가 실행됩니다.

예:

• 동작: 효과는 컴포넌트DidUpdate와 마찬가지로 종속성(count 또는 someProp)이 변경되는 각 렌더링 후에 실행됩니다.

useEffect를 컴포넌트WillUnmount로 사용

ComponentWillUnmount를 복제하려면 useEffect에서 정리 함수를 반환합니다. 이 정리 기능은 구성요소가 마운트 해제되거나 효과가 다시 실행되기 전에 실행됩니다.

예:

• 동작: 구성 요소가 마운트 해제되려고 할 때 정리 기능이 실행됩니다(commentWillUnmount와 유사).

한 번에 세 가지 수명 주기 메서드 모두 처리하기Effect

대부분의 경우 단일 useEffect는 구성 요소의 마운트, 업데이트 및 마운트 해제 단계를 처리할 수 있습니다. 다음은 이를 보여주는 예입니다.

예:

• 마운팅: 효과는 초기 렌더링 시 한 번만 실행됩니다.

• 업데이트 중: someProp이 변경될 때마다 효과가 실행됩니다.

• 마운트 해제: 정리 기능은 구성 요소가 마운트 해제될 때 또는 종속성 변경으로 인해 효과가 다시 실행되기 전에 실행됩니다.

useEffect의 실행 빈도 제어

useEffect의 동작은 종속성 배열에 의해 제어됩니다.

• 종속성 배열 없음: 매 렌더링 후에 효과가 실행됩니다.

• 빈 종속성 배열 []: 효과는 초기 렌더링(compositeDidMount 모방) 후 한 번만 실행됩니다.

• 특정 종속성: 지정된 종속성이 변경될 때마다 효과가 실행됩니다.

• 예: 종속성 배열 없음

• 동작: 효과는 모든 렌더링(초기 및 업데이트) 후에 실행됩니다.

일반적인 함정과 모범 사례

• 종속성 누락 방지: 오래된 클로저와 버그를 방지하려면 useEffect 내에서 사용되는 모든 상태와 속성을 종속성 배열에 항상 포함하세요.

• 다중 useEffect 호출: 단일 구성 요소에서 각각 특정 부작용을 담당하는 여러 useEffect 후크를 사용하는 것이 일반적이며 권장됩니다. 이렇게 하면 코드가 더욱 모듈화되고 관리하기 쉬워집니다.

• 정리: 구성 요소가 마운트 해제되거나 효과가 다시 트리거될 때 해제되어야 하는 구독, 타이머 또는 기타 리소스와 관련된 효과에 대해서는 항상 정리를 고려하십시오.

useEffect를 효과적으로 이해하고 사용하면 기능적 구성 요소 내에서 깔끔하고 예측 가능한 방식으로 부작용을 관리할 수 있으며, 수명 주기 메서드를 통해 클래스 구성 요소가 갖는 것과 동일한 기능을 제공할 수 있습니다.

以上がReact ライフサイクル メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。