리액트 생명주기란 뭘까

라이프사이클

---

컴포넌트는 생성(mounting) ⇒ 업데이트(updateing) ⇒ 제거(unmounting)의 라이프사이클을 가집니다

실제로 사용할때는 두가지 방향으로 나뉩니다

• Class Component
• Function Component

Function Component

함수형 컴포넌트에서 라이프사이클을 흉내낼수 있게 해주는 함수

함수 단위로 나눌 수 있다는 이점이 존재하는데 이때 관련 없는 로직이 섞여들어가면서 버그가 발생할 수 있다

useEffect(() => {}); // 렌더링 된 이후 동작, 리렌더링 후 다시 동작
useEffect(() => {}, []); // 렌더링 된 이후 한번만 동작
useEffect(() => {}, [dep1, dep2]); // 렌더링 된 이후 동작, 의존성이 변경되었을 경우 동

각 과정에 대한 예시를 포함해서 설명

마운팅(Mounting)

컴포넌트가 DOM에 삽입되는 과정
클래스 컴포넌트에선 componentDidMount에 해당

useEffect(() => {
    // 마운팅시 실행할 코드
}, []);

업데이트(Updating)

props나 state의 변경으로 인해 컴포넌트가 재렌더링 되는 과정
클래스 컴포넌트에선 componentDidUpdate에 해당

useEffect(() => {
    // 업데이트시 실행할 작업

    // 마운트와 업데이트의 구분이 필요한 경우
    if(mounted) {
        // 업데이트시에만 실행할 작업
    } else {
        mounted = true;
    }
});

언마운팅(Unmounting)

클래스 컴포넌트에선 componentWiilUnmount에 해당

useEffect(() => {
    return () => {
        // 언마운트시 실행할 작업
    };
}, []);