230306 숙달을 위한 메모: 생명주기(Life Cycle)

반응형

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

리액트 컴포넌트에는 Life Cycle(생명주기)라는 것이 있다. 컴포넌트가 표시되고 사라지는 순간까지를 나타낸 표현 인데, react에서 사용할 시점은 크게 mout → update → unmount로 나뉜다. 

---

0. mount(컴포넌트가 표시될 때)

useEffect(컴포넌트가 표시될 때 실행할 함수, [빈 대괄호]);

---

1. update (컴포넌트 내부 요소가 업데이트될 때)

useEffect(요소들이 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수/State]);

---

2. unmount (컴포넌트가 사라질 때)

useEffect(() => {return () => 컴포넌트가 사라질 때 실행할 함수})

---

3. 예시: 로딩 완료 시, 문자 화면에 추가하기

import React, { useState, useEffect } from 'react'

// 로딩 완료되는 순간 추가 됐습니다 텍스트가 추가되는 함수 ↓
function Loading() {
// 로딩 여부를 위한 state 선언
  const [isLoaded, setIsLoaded] = useState(false);
 
 // 문자 표시를 위한 state 선언
  const [text, setText] = useState([]);

//화면 처음 진입 시, 3초 수 로딩완료여부 true로 변환
  useEffect(() => {
    setTimeout(() => {setIsLoaded(true)}, 3000);
  }, [])

// isLoaded상태가 변하면, text가 추가되도록
  useEffect(() => {
    const temp = text.concat(['추가 됐습니다']);
    setText(temp);
  }, [isLoaded]);
// []depandency에[isLoaded, text]라고 추가 한다면, text가 바뀔 때마다 랜더링되어
// 계속 추가되는 것이 화면으로 보여지게 된다

  return (
    <div>
        {isLoaded ? <>로딩완료!</> : <>로딩 중</>}
        {text}
    </div>
  )
}

export default Loading

---

task를 진행 할 때마다 사수에게 들었던 말이있다."어떤 타이밍에 이게 구현 되게 할거에요?"
당시 "어떤 타이밍 "이라는 단어와 의미에 대해 제대로 파악을 하지 못했었다.
때문에 얼렁뚱땅 '구현 되기만 하면 되지 않나', 라고 생각 했던 과거의 나의 뚝배기를 깬 후
'원리나 구조를 좀 알고 개발하지 그랬냐' 라고 한 소리 하고 싶을 정도로 현재 열이 받는다...ㅠ
(과거에 조금이라도 공부했다면 지금 덜 고생하지 않았느냐 라는 소리)

그래도 지금이라도 차근차근 알아가고 있으니 헷갈리거나 기억이 나지 않는다면, 다시 와서 글을 살펴보자!!

사진출처: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.educba.com%2Freact-lifecycle%2F&psig=AOvVaw3RbnUbDDdkpvIvB-zd4SpB&ust=1678177313353000&source=images&cd=vfe&ved=0CBEQjhxqFwoTCPD3_efvxv0CFQAAAAAdAAAAABAJ