React의 생명주기. 라이프 사이클

React는 컴포넌트 기반의 View를 중심으로 한 라이브러리다.

각각의 컴포넌트에는 라이프 사이클, 생명 주기가 존재한다.

컴포넌트의 생명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다.

 

마운트 (생성)

컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다.

• constructor()
  • 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면 constructor가 없어도 된다.
  • react 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출된다.
  • 생성자 구현하면, this.props가 생성자 내에서 정의되도록 super(props)를 호출해야 한다.
  • state값을 변경하려면 constructor()외부에서 this.setState()를 통해 수정해야 한다.
• render()
  • 클래스 컴포넌트에서 반드시 구현되어야하는 유일한 매서드
  • this.props와 this.state의 값을 활용해 값을 반환한다.
  • 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해 브라우저와 직접적인 상호작용을 하지 않는다.
• componentDidMount()
  • 컴포넌트가 마운트된 직후 호출된다.
  • DOM노드가 있어야하는 초기화 작업이 이루어지면 좋다.
  • 외부에서 데이터 불러와야 한다면 네트워크 요청을 보내기 좋은 위치다.
• getDerivedStateFromProps()

 

업데이트

props나 state가 변경되면 render가 진행되며 순서대로 호출된다.

• render()
• componentDidUpdate()
  • render갱신이 일어난 직후 호출된다. 최초 렌더링에서는 호출되지 않는다.
• getDerivedStateFromProps()
• shouldComponentUpdate()
• getSnapshotBeforeUpdate()

 

마운트 해제(제거)

컴포넌트가 DOM에서 제거될 때 호출된다.

• componentWillUnmount()
  • 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.
  • 타이머 제거, 네트워크 요청 취소, componentDidMount()에서 생성된 작업 정리할 때 사용.
  • 실행 직후 컴포넌트는 렌더링되지 않으므로 setState()를 호출하면 안된다.

 

 

useEffect Hook은 React의 라이프사이클과 관련이 있다.

이는 componentDidMount, componentDidUpdate, componentWillUnmount를 모두 합쳐 놓은 것 같은 기능을 한다.

useEffect(함수, 배열) : 첫번째는 실행할 함수, 두번째는 조건을 배열로 전달한다.

• 마운팅만 설정할 경우, 두번째 매개 변수를 빈 배열로 전달한다.
• 데이터 업데이트마다 설정할 경우, 두번째 매개 변수에 체크할 데이터를 넣는다.
• 언마운팅만 설정할 경우, 함수를 리턴하며 두번째 매개변수로 빈 배열을 전달한다.

 

---

인스턴스 instance

객체 지향 프로그래밍에서 클래스에 소속된 개별적인 객체를 말한다.

사용자(user)라는 클래스를 정의하고 홍길동(hong)이라는 객체를 생성하는 경우, hong 객체는 user라는 클래스의 인스턴스가 된다.

하나의 클래스를 사용해 유사한 성질을 가진 수많은 인스턴스를 생성할 수 있다.

추상적인 개념인 클래스에서 실제 객체를 생성하는 것을 인스턴스화(instantiation)한다고 말한다.