이재호

useEffect와 class 생명주기 본문

프론트엔드/리액트

useEffect와 class 생명주기

호재이 2023. 3. 23. 15:58

리액트 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 존재한다
과거 함수형에는 상태를 관리하는 기능이 없었기때문에 클래스형 컴포넌트를 이용해 리액트를 구축했는데
현재 함수형컴포넌트에도 훅이라는게 등장으로 다양하게 상태를 관리할수 있는 기능이 생겼다
레거시 코드가 아니라면 새 프로젝트에서 함수형 컴포넌트를 쓰는게 보다 더 직관적으로 편리하다

재목에는 useEffect와 clas에 생명주기를 작성하였다
생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말합니다
class 에는 핵심적인 3가지 생명주기가 존재합니다.

 

  • ComponetDidMount()
  • ComponetDidUpdate()
  • ComponetWillUnmount()

첫번쨰부터 컴포넌트가 최초로 랜더링 될때 실행되는 메서드 입니다
두번쨰는 컴포넌트가 재평가, 재랜더링 되면 호출됩니다
세번쨰는 컴포넌트가 DOM에서 삭제되기전에 호출됩니다

위 세가지를 보면 함수형 컴포넌트 훅에서 useEffect와 같은걸 볼수 있습니다
useEffect에 두번쨰 인자에 을 넣은게 ComponetDidMount 이고
ComponetDidUpdate는 두번쨰 인자 배열에 [재랜더링컴포넌트] 해당 컴포넌트가 재랜더링 될떄만 호출됩니다
ComponetWillUnmount는 useEffect에 cleaup 함수와 같습니다.

'프론트엔드 > 리액트' 카테고리의 다른 글

useMemo 와 useCallback  (0) 2023.03.23
ref란  (0) 2023.03.18
훅 패밀리  (0) 2023.03.07
클래스형 컴포넌트와 함수형 컴포넌트  (0) 2023.03.05
json-server ERR_CONNECTION_REFUSED 오류해결  (0) 2022.12.05