컴포넌트(Component)란?

• 컴포넌트는 함수형 컴포넌트와 클래스 컴포넌트가 있다.
• 컴포넌트를 사용하면 UI를 독립적이고 재사용이 용이하며, 각 부분이 분리되어있어 처리하기 쉽다.
• React.Component와 React.PureComponent로 세부적으로 나누어 정의할 수 있다.
  
  

---

React.Component란?

• ES6 클래스를 사용하여 컴포넌트를 정의할 때 기초가 되는 class이다.
• 클래스 컴포넌트를 작성할 때 React.Component를 상속받아야 한다.
• render() 메서드는 React.Component의 하위 클래스에서 반드시 정의해야하는 메서드이다.
  
  

---

컴포넌트 생명주기(Life Cycle)

• 모든 컴포넌트들은 생명주기 메서드를 가지고 있고, 이 메서드를 이용하여 특정 시점에 코드가 실행되도록 설정할 수 있다. [생명주기 도표]
• 함수형 컴포넌트는 Life Cycle을 부를 수 없다.[함수형컴포넌트는 Hooks의 useEffect를 찾아볼 것!]
  

1. 마운트(Mount)

생성되어 DOM에 삽입될 때 아래 메서드들을 순서대로 호출한다.

• constructor()
  • 메서드를 바인딩하거나 state 초기화 작업이 없다면 생성자 구현하지 않아도 된다.
  • React.Component를 상속한 생성자를 구현할 때에는 super(props)를 호출해야한다.
    [안하면 this.props가 생성자 내에 정의되지 않아 버그로 이어질 수 있음]
  • this.state를 직접 할당 할 수 있는 유일한 곳, 그 외의 메서드는 this.setState()를 사용한다.
  • state에 props를 복사하면 안된다!!
  • 생성자를 쓰는 이유
    • this.state를 사용하여 state 초기화
    • 인스턴스에 이벤트 처리 바인딩
      
      
• render()
  • 클래스 컴포넌트에서 반드시 구현되어야하는 유일한 메서드이다.
  • render()함수는 순수해야한다.
    • 컴포넌트의 state를 변경하지 않고, 호출 될 때마다 동일한 결과를 반환해야하며, 브라우저와 직접적으로 상호작용을 하지 않는다.
    • 브라우저와의 상호작용이 필요할 시, componentDidMount() 혹은 다른 생명주기 메서드 내에서 수행

• componentDidMount()
  • 컴포넌트가 마운트된 직후, 트리에 삽입된 직후에 호출된다.
  • DOM에 삽입되어 렌더링이 완료된 후 실행된다.
  • DOM 노드가 있어야 하는 초기화 작업을 진행할 시 이 메서드에서 작업을 하면 된다.
  • 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치이다.
  • 즉시 setState()를 호출하는 경우도 있다.
    • 즉시 호출한다면, 추가적인 렌더링이 발생하며 화면을 갱신하기 전에 이루어진다.

---

2. 업데이트(Update)

props와 state가 변경되면 갱신이 발생하며, 컴포넌트가 다시 렌더링 될 때 다음 순서대로 호출한다.[porps는 NewProps, state는 setState]

• render()
  • 새로운 props를 받거나, setState() 함수를 이용해 상태가 변경될 때

componentDidUpdate(prevProps, prevState, snapshot)

• componentDidUpdate()
  • 갱신이 일어난 직후에 호출되며, 최초 렌더링에서는 호출되지 않는다.
  • 컴포넌트가 갱신된 후에 실행된다.
  • 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업에 이 메서드를 사용한다.
  • 즉시 setState()를 호출할 수 있지만, 조건문으로 감싸야한다.
    • 감싸지 않으면 무한반복이 발생할 수 있다.

---

3. 해제(Unmount)

• 컴포넌트가 DOM상에서 제거될 때에 호출된다.
• 컴포넌트를 DOM에서 제거하기 전에 실행된다.
• 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되며, 해제되면 절대로 다시 마운트되지 않는다.
• 컴포넌트는 다시 렌더링되지 않고, setState를 호출하면 안된다.