The Ultimate React Course 2024: React, Redux & More 의 필기 위주로 작성되었습니다. 해당 강의는 강의 내용 기반으로 블로그 글 작성이 허용된 강의입니다.

컴포넌트 (인스턴스)의 생명주기

앞에서 배웠듯 엄밀히 말하면 컴포넌트 인스턴스의 생명주기지만, 줄여서 컴포넌트의 생명주기라고 해보겠다. 생명주기는 컴포넌트가 시간에 따라 가질 수 있는 다른 페이즈들을 뜻한다.

• 마운트/초기 렌더: 컴포넌트가 최초로 렌더되어, fresh한 state와 prop이 만들어진다.
• Re-render (선택적): State 업데이트, prop 변화, 부모 리렌더링, context 변화시에 이루어진다.
• Unmount: 컴포넌트가 state와 prop과 함께 destroy되고 제거된다.

useEffect

이미 기본은 잡힌 개념이니, 중요한 부분들만 정리해본다.

• 비어있는 dependency array는 컴포넌트가 처음 mount될때에만 effect가 실행될 것을 뜻한다.
• Clean-up 함수를 리턴하여 컴포넌트 리렌더/언마운트 하기 전 실행 할 수도 있다.
• useEffect의 주 목적은 컴포넌트를 외부 시스템과 동기화시키기 위해서다.
• Dependency array가 비어있으면 렌더 떄마다 실행되고, 이는 추천되지 않는다.

Effect는 브라우저 페인프 이후에 실행된다. cleanup은 effect 이전, unmount 이후에 실행된다.