리액트 컴포넌트의 생명주기(Life Cycle)

컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(lifecycle)라고 부릅니다.

컴포넌트는 생명주기마다 함수를 가지고 있는데 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수도 있습니다.

 

· 생명주기 함수 살펴보기

생명주기 함수는 render()함수를 포함하여 총 8종의 함수가 있습니다.

생명주기 함수는 리액트 엔진에서 자동으로 호출합니다.

 

 

· constructor(props)함수

- 맨 처음 생성될 때 한 번만 호출

- 이 함수를 사용할 때 super(props)함수를 가장 위에 호출해야 합니다.

- super() 함수에는 프로퍼티, 생명주기 상태 등을 초기화하는 중요한 과정을 포함하고 있습니다.

 

· render()함수

- 데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출되는 함수.

- 이 함수가 반환하는 jsx를 화면에 그려줍니다. 

 

· static getDerivedStateFromProps(props, state)함수

- 정적함수 (즉, 이 함수 안에서 this.props, this.state 방법으로 props, state값에 접근할 수 없다.)

- 값에 접근하기 위해서는 반드시 인자에 전달된 props, state를 이용해야 합니다.

- 이때의 props는 상위 컴포넌트에서 전달된 값, state는 현재 컴포넌트의 state값입니다.

- 상위 컴포넌트에서 전달받은 프로퍼티로 state값을 연동할 때 주로 사용되며, 반환값으로 state를 변경합니다.

 

· componentDidMount() 함수

- render() 함수가 jsx를 화면에 그린 이후에 호출되는 함수

- 컴포넌트가 화면에 모두 표현된 이후 해야하는 작업들은 여기에서 하면 됩니다.

 

· shouldComponentUpdate(nextProps, nextState) 함수

- 프로퍼티를 변경하거나, setState() 함수를 호출하여 state값을 변경하면 '화면을 새로 출력해야 하는지' 판단하는 함수입니다.

- 화면을 새로 출력할지 말지 판단, 데이터 변화를 비교하는 작업을 표함하므로 리액트 성능에 영향을 많이 줍니다.

- 화면 변경을 위해 검증 작업을 해야하는 경우 이 함수를 사용합니다.

- forceUpdate()함수를 호출하면 이 함수는 호출되지 않습니다.

 

· getSnapshotBefore(prevProps, prevState) 함수

- 컴포넌트의 변경된 내용이 가상 화면에 완성된 이후 호출되는 함수입니다. 

- 컴포넌트가 실제로 출력되기 전에 호출되므로 화면에 출력될 엘리먼트의 크기 또는 스크롤 위치등의

   DOM 정보에 접근할 때 사용됩니다.

 

· componentDidUpdate(prevProps, prevState, snapshot) 함수

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

- 부모 컴포넌트로부터 전달된 이전 프로퍼티, state값과 함께 getSnapshotBeforeUpdate() 함수에서 반환된 값(snapshot)을 인자로 전달받습니다.

- 이 값들을 이용해서 스크롤 위치를 옮기거나 커서를 이동하는 등의 DOM 정보를 변경할 때 사용됩니다.

 

· componentWillUnmount() 함수

- 컴포넌트가 소멸되기 직전에 호출되는 함수입니다.

- 보통 컴포넌트에서 감시하고 있는 작업들을 해체할 때 필요한 함수입니다.