[React] React.Component

React를 사용할 때 컴포넌트를 class 또는 함수로 정의할 수 있습니다.

React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 합니다.

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

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

 

컴포넌트 클래스를 직접 만들어서 사용하지 마세요. React 컴포넌트를 사용할 때에는 상속보다 합성을 주로 사용합니다.

 

컴포넌트 생명주기

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

 

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

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

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

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

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

• componentWillUmmount()

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

• static getDerivedStateFromError()
• componentDidCatch()