[ReactJS] 컴포넌트 생명주기

리액트 컴포넌트의 생명부터 소멸까지의 과정을 컴포넌트 생명주기라고 한다.

각 생명주기 시점마다의 함수를 제공하고 있어, 해당 함수를 활용하면 특정 시점에 원하는 동작을 만들 수 있습니다.

 

<리액트 컴포넌틈 생명주기 다이어그램>

 

constructor(props) 함수

  컴포넌트를 처음 만들때 호출합니다.

  super()는 프로퍼티와 생명주기 상태 등을 초기화과정 포함합니다.

constructor(props) {
    super(props); // 항상 super() 함수를 맨 위에 호출
    
    // 추가적인 state 데이터 혹은 변수 선언
}

 

render() 함수

  컴포넌트 랜더링이 필요할떄 호출되는 함수입니다.

 

getDerivedStateFromProps 함수

  정적함수로, 함수 안에서 prop, state에 접근할 수 없습니다.

  이 함수는 상위 컴포넌트에서 전달받은 프로퍼티로 state값을 연동할 때 사용합니다.

 

componentDidMount 함수

  render()함수가 jsx를 화면에 그린 이후 호출되는 함수입니다.

 

shouldComponentUpdate 함수

 prop, state를 변경하였을때 화면의 재랜더링이 필요한지 판단하는 함수입니다.

 현재의 prop, state는 this로 접근하고 변경될 prop, state는 nextProp, nextState로 접근합니다.

 forceUpdate 함수 사용하면 위 함수가 호출되지 않습니다.

 

getSnapshotBeforeUpdate 함수

  컴포넌트의 변경된 내용이 virtual Dom에 완성 된 후 호출되는 함수입니다.

  위 함수는 실제 브라우저에 반영되기 전에 호출되어, 출력될 Dom 정보에 접근할 때 활용합니다.

 

componentDidUpdate 함수

  컴포넌트가 실제화면에 호출 된 이후 실행되는 함수입니다.

  prevProp, prevState를 사용하여 이전 값 접근할 수 있고, getSnapshotBeforeUpdate 함수의 return값을 인자로 받습니다.

 

componentWillUnmount 함수

  컴포넌트가 Dom에서 제거될 때 호출되는 함수입니다.

  이곳에선 사용자가 직접 등록한 작업들을 해제해야합니다.

 

참조

- medium.com/@mksglu/react-16-3-lifecycle-methods-7ac4e2f2024a

- yzzzzun.tistory.com/32

- Doit! 리액트 프로그래밍 정석