React | Component (1)

리액트를 사용하면서 기초개념이 부족하여 조금만 다른 사항이 추가되거나 다른코드가 들어왔을 경우 헷갈리는 경우가 많다. 그래서 이번기회에 글로 적어야 겠다는 생각이 들었다.

개요

React를 사용할 때는 컴포넌트를 class 또는 함수로 정의할 수 있습니다. React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 합니다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

render()는 React.Component의 하위 class에서 반드시 정의해야 하는 메서드입니다.

컴포넌트 생명주기
모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다.

마운트
아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다.

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

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

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

마운트 해제
아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출됩니다.

• componentWillUnmount()