React의 컴포넌트 라이프사이클

*ReactJS *는 구성 요소를 사용하여 작동합니다. 코드를 더 재사용할 수 있게 해줍니다. 이러한 구성 요소에는 생명을 얻고 코드에서 작업한 다음 최대 절전 모드로 들어가는 특정 수명 주기가 있습니다. 구성 요소 수명 주기에 대해 시작하기 전에 ReactJS에서 구성 요소가 무엇인지 알아야 합니다.

컴포넌트는 반응 앱의 블록입니다. 여러 구성 요소는 기본적으로 특정 HTML 렌더링 출력이 포함된 반응 앱의 블록입니다. 따라서 시작 구성 요소는 미리 빌드된 반응 파일에서 App.js라고 말할 수 있습니다. 사이트를 보다 동적이고 유용하게 라우팅하거나 구축하기 위해 다른 구성 요소와 연결할 수 있습니다.


Functional 및 Class 구성 요소는 React로 작성된 두 가지 유형의 구성 요소입니다. 우리는 기능 구성 요소에 대해 이야기할 것입니다. 위 이미지는 함수가 반환 출력을 갖는 함수 구성 요소를 나타냅니다. 이 함수는 내보낼 수 있습니다. 즉, 반응 앱의 어디에서나 이 구성 요소를 사용할 수 있으며 함수는 래퍼 아래에 작성된 줄을 인쇄합니다. 누군가가 단일 요소에서 여러 div를 사용해야 하는 경우 기본 div 태그 아래에 여러 div 태그를 사용할 수 있습니다.

따라서 이것은 구성 요소와 ReactJS에서 구성 요소가 실제로 무엇인지에 대한 아이디어입니다. 그러나 우리는 구성 요소 수명 주기에 대해 이야기하고 있었습니다. 이러한 구성 요소는 3단계를 유지하는 주기로 작동합니다. 그들은:

장착

업데이트 및

마운트 해제

(출처: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ )

1. 장착
반응 구성 요소의 이 단계에서 생성자를 사용하여 초기화됩니다. 이러한 생성자는 변수의 상태를 갖는 간단한 함수 또는 메서드입니다. 이 생성자는 클래스 기반 구성 요소에 적용되지만 Functional 구성 요소에서는 변수의 상태를 설정하고 변경하기 위해 "useState"후크를 사용하기 때문입니다.
따라서 대부분의 후크는 이러한 생성자를 처리하기 위한 것입니다. 반응의 Q&A 섹션에서 다음과 같이 말합니다.



어쨌든 이 단계에서 구성 요소는 기본 상태를 사용하여 DOM에 마운트됩니다. 기능적 구성요소에서 코드는 이와 유사할 것입니다.

const App = () => {
  const [counter, setCounter] = useState(0);

  console.log("This happens on EVERY render.");
  return (
    <>
      <div>Counter: {counter}</div>
      <div style={{ marginTop: 20 }}>
        <button onClick={() => setCounter(counter + 1)}>Increment</button>
      </div>
    </>
  );
};

[신용 거래: ]

위의 코드에서 useState 후크는 변수를 dom에 마운트하고 그 후에 업데이트 단계를 위해 자체적으로 준비합니다.

componentDidMount()는 구성 요소가 마운트(트리에 삽입)된 직후에 호출됩니다.

2. 업데이트
업데이트는 기존 돔이 변경되거나 조작될 때 발생합니다. 이러한 업데이트는 state 또는 props에 의해 처리될 수 있습니다. 위에서 우리는 어떻게든 상태를 엿볼 수 있었습니다. 하지만 props는 다른 컴포넌트에 의해 전달되는 값입니다. 기능 구성 요소의 인수처럼 수신되는 읽기 전용 속성입니다. 새 상태를 설정하여 코드를 업데이트하면 코드는 다음과 같습니다.

const App = () => {
  const [counter, setCounter] = useState(0);

  //new state update
  setCounter(5);


  return (
    <>
      <div>Counter: {counter}</div>
      <div style={{ marginTop: 20 }}>
        <button onClick={() => setCounter(counter + 1)}>Increment</button>
      </div>
    </>
  );
};

위의 코드에서 새 setCounter 값을 5로 설정하여 코드가 0 대신 5부터 계산을 시작하도록 했습니다. 또한 onClick 함수는 클릭할 때마다 상태를 업데이트합니다.

변수나 상태가 변경되면 렌더링 기능이 발생합니다. 그 전에는 업데이트 프로세스가 계속 진행됩니다.
componentDidUpdate()는 업데이트가 발생한 직후에 호출됩니다. 이 메서드는 초기 렌더링에 대해 호출되지 않습니다.

3. 마운트 해제
구성 요소가 DOM에서 제거되면 구성 요소가 마운트 해제됩니다. componentWillUnmount()는 구성 요소가 마운트 해제되고 파괴되기 직전에 호출됩니다. 타이머 무효화, 네트워크 요청 취소 또는 componentDidMount()에서 생성된 구독 정리와 같이 이 메서드에서 필요한 정리를 수행합니다.

반응 문서에는 "구성 요소가 다시 렌더링되지 않기 때문에 componentWillUnmount()에서 setState()를 호출해서는 안 됩니다. 구성 요소 인스턴스가 마운트 해제되면 다시 마운트되지 않습니다."

반응 구성 요소 수명 주기의 표현: