LifeCycle

컴퓨터 시스템의 자원은 유한하고, 한정된 자원을 효과적으로 사용하기 위한 방식이다.
React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이고 모든 컴포넌트는 세 단계를 거친다.

1. Mount (생성 될 때)
2. Update, Re-render (업데이트 할 때)
3. Unmount (제거 할 때)

Mount

최초에 컴포넌트 객체가 생성될 때 한 번 수행되는 과정을 말한다. DOM이 생성되고 웹 브라우저 상(화면)에 나타난다. Node를 만들고 사이트에 불러오는 역할을 해준다.

• constructor()
• getDerivedStateFromProps()
• render()
• componentDidMount()

constructor()

컴포넌트의 생성자 메서드이다. 컴포넌트가 만들어지면 가장 먼저 실행된다. this.state에 객체를 할당하여 지역 state를 초기화할 수 있다. 인스턴스에 이벤트 처리 메서드를 바인딩할 수 있다.

getDerivedStateFromProps()

getDerivedStateFromProps 는 props 로 받아온 것을 state 에 넣어주고 싶을 때 사용한다. 최초 마운트 시와 갱신 시 모두에서 render 메서드를 호출하기 직전에 호출된다. state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무 것도 갱신하지 않을 수 있다.

이 메서드는 이유와 상관없이 렌더링 때마다 매번 실행되므로 주의해야 한다.

render()

컴포넌트를 렌더링하는 메서드이다. 주로 컴포넌트를 JSX로 반환하는 역할을 한다

componentDidMount()

컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드입니다. 메서드가 호출되는 시점에는 컴포넌트가 화면에 나타난 상태이다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지고 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치이다.

Update

props 또는 state가 변경되면 갱신이 발생한다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출된다.

• getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

getDerivedStateFromProps()

컴포넌트의 props 나 state 가 바뀌었을때도 이 메서드가 호출된다.
getDerivedStateFromProps()

shouldComponentUpdate()

shouldComponentUpdate 메서드는 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드이다. 오직 최적화만을 위한 생명주기이다. React.memo와 역할이 비슷하다. props 또는 state가 새로운 값으로 갱신돼 Rendering이 발생하기 직전에 호출된다.

render()

render()

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate 는 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져온다. 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 세번째 인자로 받아와서 사용을 할 수 있다.

예를 들어 스크롤 위치를 들수 있다. 리렌더링이 일어나기 전 스크롤 위치값을 가져와 리렌더링이 되어도 기존 스크롤 위치가 유지되도록 할때 쓰인다.

 getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    if (prevProps.color !== this.props.color) {
      return this.myRef.style.color;
    }
    return null;
  }

componentDidUpdate()

사용자의 환경에는 이미 바뀐 상태가 적용되어있을 때 호출되는 메서드이다.

Unmount

컴포넌트가 DOM에서 제거될 때 사용된다.

• componentWillUnmount()

componentWillUnmount()

컴포넌트가 화면에서 사라지기 직전에 호출된다. Clean하는 과정이고 네트워크의 요청이나 이벤트 리스너, 더이상 필요하지 않는 요소들을 제거할 때 사용한다.