[React/기술면접] 생명 주기 (Life Cycle)

 생명 주기 (Life Cycle) 

 

혹시 컴포넌트도 수명이 있다는 것을 알고 있나요?

사람이 태어나서 성장하고 생명을 다하는 것처럼 리액트 컴포넌트도 이러한 과정을 겪으며, 이를 생명주기(Life Cycle)라고 한다.

 

728x90

 

 1. 생명 주기 

React 컴포넌트에는 생명 주기(라이프사이클)가 존재한다. 생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어져 있으며, 각 단계마다 특정한 이벤트가 발생하며 그 때마다 사용되는 메서드가 있다. 이러한 생명주기 함수는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 사용할 수 없다. 함수형 컴포넌트에서는 Hooks으로 유사한 기능을 활용할 수 있으므로, 이 부분은 Hooks에서 다뤄볼 것이다.

 

 

 

---

 2-1. 마운트 

처음 DOM이 생명된 후 웹 브라우저상에 나타나는 단계를  마운트(mount) 라 하며, 다음과 같은 메서드들이 실행된다.

 

  1. constructor

constructor(props) { ... }

• 컴포넌트의 생성자 메서드로, 컴포넌트가 생성될 때 가장 먼저 실행된다
  
  
• 이 메서드 내에서 state를 정의할 수 있으며, state가 필요없다면 constructor를 작성하지 않아도 된다
  
  
• 주의
  
  
  • 해당 함수의 1번째 라인에 반드시 super(props)를 호출해야 하며, 미호출시 props가 생성되지 않는다

 

  2. getDerivedStateFromProps

 

• React 16.3 버전 이후에 나온 라이프사이클 메서드
  
  
• props로 받아온 값을 state에 동기화해주는 메서드로, 컴포넌트가 마운트될 때와 업데이트될 때 호출된다

 

  3. render

render() { ... }

• 컴포넌트를 렌더링 해주는 메서드
  
  
• 렌더링할 것이 없는 경우, null 또는 false를 리턴한다
  
  
• 주의
  
  
  • 여기서 state를 수정해서는 안 되며, state를 수정할 경우 render()가 다시 호출될 수 있다
    
    
  • 브라우저의 DOM에 접근해서는 안 되며, DOM의 정보를 가져오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다
    

 

  4. componentDidMount

componentDidMount() { ... }

 

• 컴포넌트의 첫 번째 렌더링이 끝나면 호출되는 메서드
  
  
• 이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태이다
  
  
• 이 안에서는 JS 라이브러리나 프레임워크 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리할 수 있다

 

---

 2-2. 업데이트 

React 컴포넌트에 변화가 있을 때를  업데이트(update) 라 하며, 다음과 같은 경우에 업데이트를 한다.

 

• props가 바뀔 때
  
  
  • 부모 컴포넌트에서 넘겨주는 props가 바뀔 때
    
• state가 바뀔 바뀔 때
  
  
  • setState 함수를 통해 state가 업데이트될 때
• 부모 컴포넌트가 리렌더링될 때
  
  
  • 자신에게 할당된 props 또는 state가 바뀌지 않아도 리렌더링된다
• this.forceUpdate로 강제로 렌더링을 트리거할 때

 

 

이때 실행되는 메서드는 다음과 같다.

 

  1. getDerivedStateFromProps

 

• 컴포넌트의 props나 state가 바뀌었을 때 호출된다

 

  2. shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) { ... }

• props 또는 state를 변경했을 때, 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드
  
  
• 반드시 true 또는 false 값을 반환해야 하며, false를 반환할 경우 업데이트 과정은 중단된다
  
  
• 이 메서드를 따로 생성하지 않으면 언제나 true를 반환한다
  
  
• 메서드 내부에서 현재 props, state는 this.props, this.state로 접근이 가능하며, 새로 설정될 props와 state는 각각 nextProps, nextState로 접근이 가능하다

  3. render

render() { ... }

• 컴포넌트를 리렌더링해준다
  

 

  4. getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.array !== this.state.array) {
        const { scrollTop, scrollHeight } = this.list
        return { scrollTop, scrollHeight };
    }
}

• 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드로, React 16.3 버전 이후에 만들어졌다
  
  
• 이 메서드에서 반환하는 값은 componentDidUpdate의 3번째 파라미터인 snapshot 값으로 전달받을 수 있으며, 주로 업데이트하기 직전의 값을 참고할 때 활용된다
  
  * 예시 : 스크롤바 위치 유지
  

 

  5. componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) { ... }

• 리렌더링(업데이트) 작업이 완료된 후 실행하는 메서드
  
  
• 업데이트가 끝난 직후이므로 DOM 관련 처리를 해도 된다
  
  
• 여기서는 prevProps, prevState를 사용해서 컴포넌트가 이전에 가졌던 데이터에 접근이 가능하다

 

---

 2-3. 언마운트 

 언마운트(unmount) 는 마운트의 반대 과정으로, 컴포넌트를 DOM에서 제거하는 과정이다.

 

1. componentWillUnmount

componentWillUnmount() { ... }

• 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
  
  
• componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM 등이 있다면, 여기서 제거 작업을 해야 한다

 

---

 2-4. (추가적인) 라이프사이클 메서드 

  1. componentDidCatch

componentDidCatch(error, info) {
    this.setState({
        error: true
    });
    console.log({ error, info });
}

• React 16 버전에서 새롭게 도입된 메서드
  
  
• 컴포넌트 렌더링 도중에 에러가 발생했을 때 어플리케이션이 먹통이 되지 않고 오류 UI를 보여준다
  
  
• 여기서 error는 어떤 에러가 발생했는지 알려주며, info는 어디에 있는 코드에서 오류가 발생했는지 알려준다
  
  
• 그러나 이 메서드는 자신의 컴포넌트 에러는 잡아내지 못하기에 this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있다

 

반응형

 

---

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

 

---

References

 

• 도서 <리액트를 다루는 기술>
• https://www.youtube.com/watch?v=pjakE0D4CeI
• https://chanhuiseok.github.io/posts/react-9/
• https://gseok.gitbooks.io/react/content/bd80-bd84-bd80-bd84-c9c0-c2dd-b4e4/react-component-lifecycle-api-c815-b9ac.html