React 라이프사이클 - React Vernacular Movement 10

React10-반응-수명주기

머리말

이전 기사에서는 React 구문에 대해 더 자세히 설명했습니다. React JSX – React 언어적 움직임 06 React 컴포넌트를 생성하는 방법과 상위 컴포넌트와 하위 컴포넌트 간의 관계를 배웠습니다.이 문서에서는 다음을 포함하여 구성 요소의 구성 요소 수명 주기에 대해 설명합니다.

  1. 수명주기의 세 단계
  2. 클래스 객체 수명주기
  3. 함수 객체의 생명주기

React 수명주기의 세 단계

라이프사이클이란 무엇입니까?

구성 요소 자체에는 생성 중, 사용자에 의해 업데이트, 데이터 수정으로 인해 업데이트, 구성 요소가 더 이상 필요하지 않을 때 최종 삭제 등의 몇 가지 상태가 있다고 상상할 수 있습니다. 일반적으로 이러한 상태는 순차적이므로 수명 주기가 있습니다.

일반적으로 수명주기는 다음 다이어그램으로 설명됩니다. 이 다이어그램은 수명주기의 세 단계를 명확하게 설명합니다.

리액트 라이프사이클-hogantech
리액트 라이프사이클

원천:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

위의 그림에서 볼 수 있듯이 세 개의 블록이 있습니다.

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

React 구성 요소에서 이 세 단계는 구성 요소 로드, 업데이트, 렌더링 및 삭제를 중심으로 진행됩니다.

클래스 구성 요소 수명주기

클래스 구성 요소에는 고유한 수명 주기가 있습니다. 클래스 구성 요소 자체는 객체이므로 객체의 속성을 갖습니다.

그러나 현재는 Hook의 등장으로 함수 컴포넌트가 상대적으로 단순하고 이해하기 쉬워졌습니다.

다음은 클래스 구성 요소에 대한 샘플 코드입니다.

				
					import React, { Component } from 'react' 클래스 테스트 확장 Component { constructor(props) { super(props) this.state = { message: '' } this.setMessage = this.setMessage.bind(this) } setMessage() { this.setState({ 메시지: 'Hello World!' }) } render() { return (
            <div>
                <button onclick="{this.setMessage}">딸깍 하는 소리</button>
                <p>{this.state.message}</p>
            </div>
        )
    }
}

				
			

설치

  • constructor( )는 객체 지향 프로그래밍의 생성자 개념과 동일합니다.

  • 초기값을 설정할 수 있으며, 이 값을 이 함수에서 설정하고 바인딩할 수 있습니다.

  • render()의 중국어 이름은 렌더링이며, 구성 요소를 페이지에 렌더링합니다. 반환된 값에서 JSX를 통해 페이지에 콘텐츠를 렌더링합니다.

업데이트 단계(업데이트 중)

  • setMessage()를 사용하면 사용자가 버튼을 클릭할 때 메시지 데이터를 업데이트할 수 있습니다.
  • render() 데이터 상태가 업데이트되면 렌더링이 트리거됩니다.

기능 요소의 수명주기

기능적 구성요소는 수명주기를 갖기 위해 React의 내장 Hook을 사용해야 합니다. Hook는 2018년에 페이스북 팀에서 출시한 것이기 때문에 2018년 이전에는 카테고리 컴포넌트를 주로 사용했습니다.

다음은 비교적 간단한 함수 컴포넌트의 샘플 코드입니다.

				
					import React, { useState } from &#039;react&#039; function Test() { const [message, setMessage] = useState(&#039;&#039;) return (
        <main>
            <button onclick="{()" > setMessage(&#039;Hello World!&#039;)}&gt; 클릭
            </button>
            <p>{메시지}</p>
        </main>
    )
}

				
			

로딩 단계(마운팅)

  • useState()는 데이터나 상태를 초기화하는 React Hook의 함수입니다.

업데이트 단계(업데이트 중)

  • setMessage()는 사용자가 클릭할 때 메시지 데이터를 업데이트할 수 있으며 onClick에서 화살표 기능을 사용하여 이를 수행할 수 있습니다.

여기서는 객체의 생명주기를 보여주기 위해 간단한 코드만을 사용하지만, 더 많은 생명주기 상황이 있는데, 이에 대해서는 나중에 Hook 기사에서 하나씩 소개하겠습니다.

결론

이 글에서는 주로 컴포넌트의 라이프사이클을 소개하고 간단한 카테고리와 기능 컴포넌트를 사용하여 라이프사이클을 설명합니다.

앞으로 주류 기능 구성 요소에 대해 후크가 자세히 소개될 예정입니다.

제안사항이나 질문이 있으시면 메시지를 남겨주세요!

이 글이 마음에 드셨다면 더 많은 분들이 보실 수 있도록 좋아요와 공유 부탁드립니다~

리액트 토속 스포츠 시리즈

React 소품 – React Vernacular 운동 09

React 프로젝트 설정 – React Vernacular Movement 08

Babel & Webpack & NPM – React Vernacular Movement 07

React JSX – React 언어적 움직임 06

React 작동 방식 – React Vernacular Movement 05

JavaScript 고차 함수 – React Vernacular Movement 04

JavaScript Async Await – React Vernacular Movement 03

JavaScript ES6 객체 – React Vernacular Movement 02

JavaScript ES6 – React Vernacular Movement 01

코멘트를 남겨주세요

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

ko_KR한국어