inute 단위의 React 수명주기

React 수명주기를 익히는 것이 전문가처럼 디버깅하기 위한 첫 번째 단계입니다.

모든 작동 방식을 이해하는 데 도움이 되는 쉬운 3분 가이드를 소개합니다.

? 빠른 시작을 위해 무료 101가지 React 팁 및 요령 책을 다운로드하세요.

React 구성요소 수명주기란 무엇입니까?

React 컴포넌트는 인간과 비슷하다?.

우리가 태어나고 진화하고 결국 죽는 것처럼 React 구성요소는 수명 주기를 따릅니다. 태어나 업데이트한 다음 죽습니다.

이 프로세스는 구성 요소 수명 주기로 알려져 있으며 세 가지 주요 단계로 구성됩니다.

• 마운팅(일명 Birth): React가 구성 요소를 생성하여 DOM에 추가합니다.

• 업데이트(일명 Evolving): 상태 변경에 따라 구성 요소가 변경됩니다.

• 마운트 해제(일명 Dying): React는 구성 요소를 제거하고 리소스를 정리합니다.

각 단계에는 React가 렌더링을 최적화하고 리소스를 관리하기 위해 수행하는 특정 단계가 포함되어 있습니다.

React 구성요소 수명주기 비유와 인간 수명주기

React 구성요소 수명주기를 이해해야 하는 이유는 무엇입니까?

React 수명 주기를 이해하면 다음과 같은 도움이 됩니다.

• useEffect 및 useLayoutEffect를 사용하여 더 나은 효과를 작성하세요.

• useEffect 내부에서 상태를 설정하는 등의 비효율성을 피하세요.

• 정리하여 메모리 누수를 방지하세요.

• 성능을 최적화하고 불필요한 재렌더링을 방지하세요.

React 컴포넌트 라이프사이클의 3단계

후크가 있는 React 구성 요소의 타임라인. 출처: https://julesblom.com/writing/react-hook-comComponent-timeline

1. 마운팅: 컴포넌트가 처음 렌더링될 때

리액트가 화면에 컴포넌트를 추가(마운트)할 때 마운트가 발생합니다.

무엇이 마운트를 유발하나요?

• root.render()를 호출할 때

• React가 JSX 트리에 구성 요소를 추가하고 해당 상위 구성 요소를 다시 렌더링하여 새 구성 요소를 포함하는 경우

장착 중에는 어떻게 되나요?

1. 렌더링: React는 구성 요소 함수(또는 클래스 구성 요소의 렌더링 메서드)를 호출하여 React 요소를 만듭니다. React는 Hook도 초기화합니다.

2. DOM 노드 삽입: React는 실제 DOM을 새로운 요소로 업데이트합니다. 이 단계는 React가 DOM에 변경 사항을 적용하는 커밋 단계 중에 발생합니다.

3. DOM 참조 설정: useRef를 사용하면 React는 DOM 노드에 대한 참조를 설정합니다.

4. useLayoutEffect 실행: React는 useLayoutEffect 함수를 실행합니다. 사용자가 시각적 변화(페인팅 중에 발생)를 보기 전에 변경이 발생하므로 여기에서 변경하면 눈에 보이는 깜박임이 발생하지 않습니다.

5. DOM Paint: 브라우저가 업데이트된 UI를 그립니다.

6. useEffect 실행: 마지막으로 React는 useEffect 함수를 실행합니다.

---

2. 업데이트: 구성 요소가 다시 렌더링될 때

업데이트는 React가 변경 사항을 반영하기 위해 구성 요소를 다시 렌더링할 때 발생합니다.

업데이트를 유발하는 요인은 무엇입니까?

• 상태 업데이트

• 업데이트된 컨텍스트 값

• 상위 구성 요소 다시 렌더링(구성 요소가 메모되지 않은 경우)

• 기타

업데이트 중에는 어떻게 되나요?

1. 재렌더링: React가 구성요소의 출력을 다시 계산합니다.

2. 조정: React는 새 React 트리를 이전 트리와 비교하여 변경 사항을 결정합니다.

3. 변경 사항 커밋: React는 변경 사항으로 DOM을 업데이트합니다.

4. DOM 참조 설정 해제: React는 업데이트 중에 참조된 DOM 노드가 제거되거나 대체되는 경우 ref.current를 무효화하고 비안정 참조 콜백을 null로 호출합니다.

5. useLayoutEffect 정리: React는 이전 useLayoutEffect의 정리 함수를 실행합니다.

6. DOM 참조 설정: React는 업데이트된 DOM 요소에 대한 새 참조 값을 설정합니다(예: 마운팅 단계에서).

7. useLayoutEffect 실행: React는 마운팅 단계에서와 같이 useLayoutEffect 후크를 호출합니다(해당 종속성이 Object.is에 따라 변경된 경우).

8. DOM 그리기: 브라우저는 변경 사항을 반영하도록 UI를 업데이트합니다.

9. useEffect 정리: 이전 useEffect의 정리 함수가 실행되어 메모리 누수를 방지합니다.

10. useEffect 실행: React는 업데이트된 useEffect 함수를 실행합니다(Object.is에 따라 종속성이 변경된 경우).

    ---

3. 마운트 해제: React가 구성 요소를 제거할 때

React가 DOM에서 구성 요소를 제거하여 리소스를 확보할 때 마운트 해제가 발생합니다.

마운트 해제를 유발하는 요인은 무엇입니까?

• 구성 요소가 더 이상 JSX 트리의 일부가 아닙니다

• React는 상위 항목을 마운트 해제합니다.

• 구성요소의 키가 변경되었습니다(React는 이전 인스턴스를 마운트 해제하고 새 인스턴스를 마운트합니다.).

• 기타

마운트 해제 중에는 어떻게 되나요?

• 정리 함수 실행: React는 useEffect 및 useLayoutEffect에 정의된 정리 함수를 실행합니다.

• DOM 참조 설정 해제: React는 ref.current를 무효화하고 null을 사용하여 참조 콜백을 호출합니다.

• DOM 노드 제거: React는 요소와 연결된 DOM 노드를 제거합니다.

더 나아가기 위한 추가 리소스

React 수명 주기에 대해 더 깊이 알고 싶다면 다음과 같은 놀라운 리소스를 추천합니다.

• 리액트 문서

  • 렌더링 및 커밋
  • 반응형 효과의 수명

• 후크가 있는 React 구성 요소의 타임라인 ❤️

• React가 다시 렌더링되는 이유

• React 렌더링 동작에 대한 (대부분) 완전한 가이드 - 경고: 매우 긴 기사입니다.

요약

React 구성 요소 수명 주기를 이해하고 나면 주니어 프런트엔드 개발자의 99%보다 앞서게 될 것입니다.

생각보다 간단합니다. 마운트, 업데이트, 마운트 해제의 세 단계만 거치면 됩니다.

실제 사례를 통해 다음 개념을 연습해 보세요.

• DOM 측정에는 useLayoutEffect를 사용하세요.

• 구성요소가 마운트 해제되면 항상 효과를 정리하세요.

이거 갖고 계시나요?.

? 버그 발견

? 생각을 위한 음식

완전 그렇죠?.

댓글을 남겨주세요. 가장 큰 교훈을 공유하세요.

"???"를 삭제하는 것도 잊지 마세요. React를 배우고 있다면 내 101 React Tips & Tricks 책을

무료

다운로드하세요. 이런 기사가 마음에 드신다면 제 무료 뉴스레터인

FrontendJoy

에 가입하세요.

일상적인 팁을 원하시면 X/Twitter 또는 Bluesky에서 저를 찾아주세요. <script> // Detect dark theme var iframe = document.getElementById('tweet-1872251057281372270-743'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872251057281372270&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1872190627729084724-61'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872190627729084724&theme=dark" } </script>

위 내용은 inute 단위의 React 수명주기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!