React 주요 개념 Lifecycle of Component

react에서는 생성, 업데이트, 제거될 때 자동으로 트리거 되는 lifecycle API를 가지고 있습니다. 컴포넌트 생성 시 자주 사용하던 render메소도 역시 react 컴포넌트의 lifecycle 메소드중 하나입니다.

ㄱ

컴포넌트가 생성될때 실행되는 메소드

• render()
  클래스 React.Component의 하위 class에서 반드시 정의해야 하는 메서드, 이 메서드가 호출되면 this.props, this.state의 값을 이용해 아래 목록 중 1가지를 반환해야 합니다.
  
  - React 엘리먼트, 일반적으로 JSX를 사용해서 생성됩니다.
  - Portal, 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링 합니다.
  - Boolean 또는 nulll, 아무것도 렌더링 하지 않습니다. 
  - 배열과 Fragment, render()를 통하여 여러 개의 엘리먼트를 반환

return () {
    return (
    	<React.Fragment>  // key가 없는 경우에는 <React.Fragment> 대신 <>만 선언해도됨
            <typeA/>
            <typeB/>
            <typeC/>
        </React.Fragment>>
    );
};

• constructor()
  메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, constructor를 사용하지 않아도 됩니다. React.component를 상속한 constructor를 구현할 때는 super(props)를 먼저 호출해야 합니다. 그렇지 않는다면 this.props가 생성자 내에서 정의되지 않아 버그가 발생할 수 있습니다. 
  
  react에서 주로 2가지 목적을 위해 사용되며 첫째로는 this.state에 객체를 할당하여 지역 state 초기화, 두 번째로는 인스턴스에 이벤트 처리 메서드를 바인딩하기 위해서입니다.
• componentDidMount()
  컴포넌트가 마운트 된 직후, 즉 트리에 삽입된 직후에 호출됩니다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어져야 하며 외부에서 데이터를 불러와야 한다면(API 사용), 네트워크 요청을 보내기 적합한 위치입니다..
  
  즉시 setState()를 호출하는 경우도 있고 이로 인해 추가적인 렌더링이 발생하지만, 브라우저가 화면을 갱신하기 전에 이루어질 것입니다. 이런 경우 render()가 2번 호출되지만 사용자는 체감할 수 없습니다. 이런 사용법은 오버헤드 이슈로 이어지기 쉽기 때문에 주의가 필요합니다. 이를 대비하기 위해 constructor()에서 미리 초기 state를 할당합니다.
  
  

컴포넌트가 변화할 때 실행되는 메소드

• componentDidUpdate()
  갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않습니다. DOM을 조작하기 위하여 이 메서드를 사용할 수 있고 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업도 이 메서드에서 이루어지면 됩니다.
  
  setState()를 즉시 호출할 수도 있지만 if문으로 감싸지 않은 경우 무한 루프가 발생할 수도 있으니 주의가 필요합니다.
  상위 prop을 그대로 state에 저장하는 것은 bad case이며 prop을 직접 사용하는 것이 좋습니다.
  
  
• shouldComponentUpdate()
  return 값으로 boolean을 받고 return 값 유무에 따라 컴포넌트를 재 렌더링 하거나, 렌더링 하지 않습니다.
  
  
• getSnapshotBeforeUpdate()
  컴포넌트가 업데이트되기 직전 실행되는 함수입니다. 새로운 데이터를 불러왔을 때 이전 스크롤 값을 참고해서 유지시켜야 하는 경우에 사용할 수 있습니다. 이 라이프사이클 메소드를 통해 리턴하는 값은 componentDidUpdate의 3번째 인자가 되어 사용이 가능합니다. 가령 지금 메소드에서 현재 스크롤 위치를 저장한 후 update가 되었을 때 componentDidUpdate에서 스크롤 값을 다시 되돌리는 등의 활동을 할 수 있습니다.
  

컴포넌트가 삭제될 때 실행되는 메소드

• componentWillUnmount()
  컴포넌트가 사라질 때 실행되는 라이프사이클 메소드, 기존 컴포넌트에 할당해 놓았던 것들을 해제할 때 사용한다.