[리액트] 라이프사이클(LifeCycle Method) 함수 & useEffect

정리하다가 다 날아갔다........... 티스토리 부들부들... :-( 

한번 더 정리하기

 

◼ 라이프 사이클

모든 리액트 컴포넌트에는 라이프 사이클(수명 주기)이 존재. 라이프 사이클은 컴포넌트가 생성되고 소멸될 때까지 일련의 과정을 의미

 

◼ 라이프 사이클 함수

총 10가지의 함수가 존재하며, will이 붙은 함수는 어떤 작업을 하기 전에 실행되고, did가 붙은 함수는 작업을 한 후에 실행

 

◼ 라이프 사이클 함수를 사용 하는 경우

어떤 작업을 수행할 때 렌더링 할 때 처리해야 하는 경우가 있고 업데이트 전후로 처리해야 하는 경우가 있는데 이럴 경우 라이프 사이클 함수를 이용해서 처리한다!

 

◼ 마운트

DOM이 생성되고 웹 브라우저상에 나타는 과정

 

◼ 업데이트 

컴포넌트를 업데이트 하는 경우로 아래와 같은 경우에 동작합니다.

 

1) Props가 바뀔 경우

2) state가 바뀔 경우

3) 부모 컴포넌트가 리렌더링 할 경우

4) this.forceUpdate로 강제로 렌더링을 트리거 할 경우

 

◼ 언마운트

마운트의 반대 과정으로 DOM에서 컴포넌트를 제거하는 과정

setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)

라이브러리 인스턴스 제거

◼ componentDidMount()

컴포넌트를 만들고 첫 렌더링을 마친 후 실행

다른 자바스크립트 라이브러리나 프레임워크의 함수 호출, 이벤트 등록, setTimeout, setInterval, 네트워크 요청 등 비동기 작업 처리

 

◼ componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

리렌더링을 완료한 후 실행. 업데이트가 끝난 직후이므로 DOM관련 처리를 해도 무방

prevProps, prevState 사용하여 이전에 가졌던 데이터에 접근

 

 

◼ componentWillUnmount()

DOM에서 제거할 때 실행

componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기에서 제거

 

 

◼ useEffect

 

1) 화면이 처음 떴을때 실행.

  deps에 [] 빈배열을 넣을 떄.

  life cycle중 componentDidmount처럼 실행

2) 화면이 사라질때 실행(clean up함수).

  componentWillUnmount처럼 실행

3) deps에 넣은 파라미터값이 업데이트 됬을때 실행

  componentDidUpdate처럼 실행

 

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps) 넣음

 

◼ deps에 특정값을 넣으면

 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출.

그리고, deps 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출.

 

만약 useEffect 안에서 사용하는 상태나 props 를 deps 에 넣지 않게 된다면, useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않게 됨! 넣어주는 것이 규칙

 

 

◼ deps 배열을 비우게 된다면

컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출

 

 

◼ cleanup 함수(뒷정리 함수)

함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다. deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다.

useEffect안에 return () => {}