React Life Cycle [ Class component 와 Function component ]

React Life Cycle 이란?

LifeCycle 은 컴포넌트의 생명주기입니다.

컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들이 있습니다.

이 메서드들을 생명주기 메서드라고 합니다.

 

컴포넌트는 Class component 와 function component 가 있습니다.

 

Class Component Life Cycle

Class Component 에서는 라이프 사이클에 따라서 우리가 원하는 순간에 원하는 코드를실행시키고 싶다면, 정해진 메소드를 통해서 사용할 수 있습니다. 원래 function component 에서는 불가능했지만, 현재는 hook 을 통해서 가능하게 되었습니다.

 

이미지는 글 하단 참고 링크의 자료를 이용했습니다.

 

전체적인 흐름은 위의 이미지를 참고했지만 세부적인 메서드명은 공식 문서를 참고했습니다.

리액트 버전이 업데이트되면서 사라지거나 메서드명이 변경된 것들이 있습니다.

이후 이미지들은 모두 공식 문서를 인용했습니다.

 

 

Index.js 에서 root 를 render 하게 되면 아래 순서로 메서드를 호출합니다.

이 메서드들을 묶어서 Mounting 이라고 합니다.

 

- constructor() : 컴포넌트 생성
- static getDerivedStateFromProps() : 상태를 업데이트하려면 개체(state) 를 반환하거나 아니면 null을 반환
- render() : 화면에 그려짐. mounting
- componentDidMount() : render 후에 실행하고 싶은 코드를 넣기

 

위의 메서드들은 render(), getDerivedStateFromProps() 를 제외하고는 컴포넌트가 생성될 때, 딱 한 번만 실행됩니다.

위의 메서드가 모두 실행되어 화면이 모두 그려진 후 (mount 된 후) state 가 변경되면, 아래의 메서드들이 순서대로 실행됩니다.

아래 메서드들을 묶어서 Updating 이라고 합니다.

 

- static getDerivedStateFromProps() : 상태를 업데이트하려면 개체(state) 를 반환하거나 아니면 null을 반환
- shouldComponentUpdate() : reder 를 호출해야 하는지 체크 boolean 값 리턴
- render() - mounting에 render와 동일
- getSnapshotBeforeUpdate() : Dom에 커밋 전 호출. Dom 의 일부 정보를 캡쳐(ex: 스크롤 위치)할 수 있습니다.
- componentDidUpdate() : render update 전에 실행하고 싶은 코드를 넣기 (ex.이전 state 와 현재 state 비교하여 불필요한 처리를 막음)

 

아래는 컴포넌트가 화면에서 사라지고 (Unmounted) 소멸 (Destroyed) 되기 직전에 실행됩니다.

아래 메서드를 통해 사용한 리소스들의 클리닝 작업이 가능합니다.

 

 

Function Component Life Cycle

Function Component 에서는 Hook 을 통해서 Class Component 만 사용 가능했던 메서드들을 대체할 수 있습니다.

useEffect 는 render() 가 처음 호출되고 끝났을 때, 특정 state 혹은 컴포넌트가 재 렌더링 됐을 때 호출됩니다.

useEffect(function(){},[]); // 첫 번째 인자로는 함수. 두 번째 인자로는 의존성 배열을 받습니다.
                          // 두 번째 인자는 생략 가능하며, 생략하면 컴포넌트가 렌더링될 때마다
                          // 첫 번째 인자의 함수가 호출됩니다.
                          // 두 번째 인자에 빈 배열 [] 을 넣으면,
                          // 컴포넌트가 처음 렌더링될 때만 실행됩니다.
                          // 두 번째 인자에 특정 값을 넣으면, 그 값이 변경될 때만
                          // 첫 번째 인자의 함수가 호출됩니다.

useEffect() hook 으로 componentDidMount() 와 componentDidUpdate() 를 사용할 수 있습니다.

 

또한 useEffect 의 return 에 컴포넌트가 unMount 될 때, 실행시키고 싶은 코드들을 넣으면 componentWillUnmount() 와 동일하게 여겨집니다. 예를들어, 컴포넌트에서 사용한 타이머나 이벤트들을 종료하는 코드를 return 에 넣어주면 되겠습니다.

 

uesEffect(function(){
	...
	
    return (....) // componentWillUnmount()
})

useEffect() hook 의 return 을 통해 componentWillUnmount() 를 사용할 수 있습니다.

 

참고 자료

https://www.youtube.com/watch?v=LgEJlKfHJW0&t=46s

https://gseok.gitbooks.io/react/content/bd80-bd84-bd80-bd84-c9c0-c2dd-b4e4/react-component-lifecycle-api-c815-b9ac.html

https://www.youtube.com/watch?v=VgbMW2f5laM