[리액트] 부모/자식 라이프사이클

🔐 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다.
컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?

• 답변
  

컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트는 Lifecycle을 갖습니다. Lifecycle은 세 가지 카테고리로 나누어지며, 개괄적인 그림은 다음과 같습니다.

- **Mounting**: 컴포넌트가 화면에 나타남
    
    ### Mounting
    
    컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입되는 단계입니다. Mounting은 Lifecyle이 종료될 때까지 한 번만 일어납니다. 아래 메서드들이 이 단계에서 순서대로 호출됩니다.
    
    · **constructor**: 컴포넌트의 인스턴스를 새로 만들 때마다 생성자 메서드가 호출됩니다.
    
    · static getDerivedStateFromProps
    
    · **render**: 화면에 표현될 JSX를 반환하고 화면에 그립니다.
    
    · **componentDidMount**: 컴포넌트가 화면에 모두 그려진 이후 호출됩니다.
    
    componentDidMount 메서드는 첫 렌더링 이후 실행됩니다. 엔드포인트에서 클라이언트로 데이터를 불러와야 하는 경우라면, API 호출을 하기 좋은 위치입니다. 데이터를 받아 올 때 setState 메서드를 이용하여 컴포넌트를 업데이트할 수 있습니다.
    
- **Updating**: 컴포넌트가 업데이트됨
    
    ### Updating
    
    props 또는 state가 변경되어 컴포넌트가 업데이트되는 단계입니다. 아래 메서드들이 이 단계에서 순서대로 호출됩니다.
    
    · static getDerivedStateFromProps
    
    · shouldComponentUpdate
    
    · **render**: 데이터가 변경되면 자동으로 호출됩니다. 화면을 다시 그립니다.
    
    · getSnapshotBeforeUpdate
    
    · **componentDidUpdate**: 화면이 다시 그려진 이후 호출됩니다.
    
- **Unmounting**: 컴포넌트가 화면에서 사라짐
    
    ### Unmounting
    
    컴포넌트가 DOM 상에서 제거되는 단계입니다.
    
    ·**componentWillUnmount**: 컴포넌트가 화면에서 제거되기 전에 호출됩니다.
    

### 흐름 설명

컴포넌트 A에서 “르탄이”라는 state를 “진도사우르스” 변경 -> 

부모 컴포넌트에서 Updating이 발생  -> 

shouldComponentUpdate 가 실행 ->

바뀐 props를 이용하여 부모 컴포넌트의 렌더링  ->

마찬가지로 바뀐 props를 이어받아 컴포넌트 B의 렌더링이 실행됨