TIL 24 | Component LifeCycle

song hyun·2021년 8월 25일
0

React

목록 보기
4/12
post-thumbnail

라이프 사이클(LifeCycle)

컴포넌트(Component)의 생명주기는 아래와 같은 단계로 나뉜다.

  • 생성(Mount): 컴포넌트 인스턴스를 만들고 DOM에 삽입할 때
  • 업데이트(Update): props 또는 state가 변경될 때
  • 제거(UnMount): 컴포넌트가 DOM에서 제거 될 때.

Mounting

컴포넌트 인스턴스를 만들고 DOM을 삽입할 때 다음과 순서대로 진행된다.
componentDidMount() 제외한 나머지 라이프 사이클 메서드는 가상(Virital DOM)을 조작한다.

constructor()

컴포넌트가 새로 생성 될 때 한 번만 실행하는 생성자 메서, constructorthis.state의 초기값 적용, 인스턴스에 이벤트 처리 메서드를 바인딩 하기 위해 사용한다.

static getDerivedStateFromProps()

이 메서드는 컴포넌트 인스턴스에 접근 할 수 없다. 또한 이 메서드는 부모 컴포넌트가 다시 렌더링을 발생 시켰을 때 실행되고, 해당 컴포넌트 내에서 지역적으로 setState() 가 발생한 경우는 실행 되지 않는다.

getDerivedStateFromProps()는 React v16.3 이후에 만들어진 라이프 사이클 메서드 이다.
최초 마운트 시와 갱신 시 모두에서 render()메서드를 호출 하기 직전에 호출된다. state 갱신하기 위한 객체를 반환하거나, null 반환하여 아무것도 갱신하지 않을 수 있다.

static getDerivedStateFromProps(props, state)

render()

클래스 컴포넌트에서 반드시 구현하는 메서드로 최종적으로 컴포넌트에서 작업한 결과물 UI를 렌더링 하는 메서드 이다.

componentDidMount()

📍 DOM Node가 있어야 하는 초기화 작업 componentDidMount()에서 이루어지면 안된다.

컴포넌트가 마운트된 직 후, 즉 DOM tree 삽입된 직 후 호출된다. fetch() 함수를 사용해서 외부에서 데이터를 불러와야 할 때 사용하기 적절하다.

class LifeCycle extends Component {
  constructor(props) {
    super(props);
    console.log('LifeCycle 컴포넌트 생성');
  }
  // 전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (업데이트)
  static getDerivedStateFromProps(props, state) {
    console.log('LifeCycle 컴포넌트 디라이브');
     return null;
  }
  render() {
    console.log('컴포넌트 렌더링');
    return <div />
  }
  componentDidMount() {
    console.log('컴포넌트 마운트 된 시점');
  }
}

Updating

업데이트 라이프 사이클 메서드는 props 또는 state가 변경될 경우 발생한다. 즉, 컴포넌트가 다시 렌더링 될 때 다음 순서로 실행된다.

static getDerivedStateFromProps()

컴포넌트 업데이트 예정 시점에 호출 (업데이트 하거나, 안 하거나)

shouldComponentUpdate()

컴포넌트가 다시 렌더링을 해야 할지 말아야 할지 결정하는 메서드 이다. 초기 렌더링 또는 forceUpdate() 호출 시에 이 메서드는 호출되지 않는다. 이 메서드는 렌더링을 방지하여 성능을 최적화 하는 목적으로 사용된다.

 shouldComponentUpdate(nextProps, nextState)

getSnapshotBeforeUpdate()

render()메서드 호출 후 DOM의 변화를 반영하기 직전에 호출되는 메서드 이다. 이 메서드에서 return 하는 값을 componentDidUpdate()의 세 번째 매개변수로 전달할 수 있다. 즉, 컴포넌트 업데이트 전 스냅셧을 가져오는 시점에 호출하는 메서드.

 getSnapshotBeforeUpdate(prevProps, prevState) {
    // DOM 업데이트가 일어나기 직전의 시점!
    // 새 데이터가 상단에 추가되어도 스크롤바를 유지하.
    // scrollHeight 는 전,후를 비교해서 스크롤 위치를 설정하기 위함이고,
    // scrollTop 은, 이 기능이 크롬에 이미 구현이 되어있는데, 
    // 이미 구현이 되어있다면 처리하지 않도록 하기 위함이다..
    if (prevState.array !== this.state.array) {
      const {
        scrollTop, scrollHeight
      } = this.list;

      // 여기서 반환 하는 값은 componentDidMount 에서 snapshot 값으로 받아올 수 있다.
      return {
        scrollTop, scrollHeight
      };
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      const { scrollTop } = this.list;
      // 기능이 이미 구현되어있다면 처리하지 않는.
      if (scrollTop !== snapshot.scrollTop) return; 
      const diff = this.list.scrollHeight - snapshot.scrollHeight;
      this.list.scrollTop += diff;
    }
  }

componentDidUpdate()

리렌더링을 완료한 후 실행되는 메서드이다. 최초 렌더링에서는 호출되지 않는다. 컴포넌트가 업데이트 되었을 시에 DOM을 조작하기 위해 사용한다.

componentDidUpdate(prevProps, prevState, snapshot)

📝 prevProps
업데이트 되기 전, props를 인자로 받을 수 있다. 이전 prop와 변경 여부를 비교하여 확인 후, 추가적인 액션을 설정하는게 유용하다.
📝 prevState
업데이트 되기 전, state 정보를 받을 수 있다. 이전 state와 비교하여 실행여부를 결정할 때 주로 사용한다.
📝 snapshot
getSnapshotBeforeUpdate() 구현시, 세번째 인자로 받을 수 있다

Mounting

📍 componentWillUnmout()가 호출된 컴포넌트는 다시 렌더링 하지 않으므로 setState()를 호출 하면 안된다.

해당 되는 컴포넌트가 DOM에서 제거될 때 호출한다.

Error

아래의 메서드들은 자식 컴포넌트를 렌더링 하거나, 자식 컴포넌트 생명주기 메서드를 호출하거나, 또는 자식 컴포넌트 생성자 메서드를 호출하는 과정에서 오류가 발생했을 때 호출된다.

static getDrivedStateFromError()

하위의 자식 컴포넌트에서 오류가 발생했을 때 호출되는 메서드 이다. 이 메서드는 매개변수로 오류를 전달 받고, 갱신된 state값을 반드시 반환해야 한다.

static getDerivedStateFromError(error)

componentDidCatch()

자식 컴포넌트에서 오류가 발생했을 때 호출되면, 두 개를 매개변수를 전달 받는다.

componentDidCatch(error, info)

📝 Error
발생한 오류
📝 Info
어떤 컴포넌트가 오류가 발생시켰는지 정보를 포함한 componentStack 키를 갖고 있는 객체

Reference

React.Component →(SITE)

profile
Front-end Developer 🌱

0개의 댓글