[React] State의 개념과 컴포넌트 Lifecycle

State and Lifecycle

State와 Lifecycle은 Class Component와 관련된 개념이다.

 

State

---

State 정의

• 상태 → 리액트 Component의 상태
• 상태 : 정상/비정상 여부가 아닌, 리액트 Component의 데이터
  ✅ 리액트 Component의 변경 가능한 데이터
  
  

State는 개발자가 정의한다.

 

렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.

• state가 변경될 경우, 컴포넌트가 재렌더링 되기 때문에
  관련 없는 값을 포함하면 쓸데없이 컴포넌트가 재렌더링되어 성능이 저하된다.
• 이런 값들은, 컴포넌트의 instance 필드로 정의한다.

 

state는 JavaScript 객체이다.

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            liked: false
        };
    }
    ...
}

• 모든 클래스 컴포넌트는, Constructor(생성자)라는 이름의 함수가 존재한다.
• 생성자는, 클래스가 생성될 때 실행되는 함수이다.
• this.state : 현재 컴포넌트의 state를 정의한다.
  • Class Component ⏩ state를 생성자에서 정의한다.
  • Function Component ⏩ state를 useState()를 사용해서 정의한다.

 

 직접 수정할 수 없다. (하면 안 됨)

// state를 직접 수정 (잘못된 사용법)
this.state = {
   name: 'Inje'
};

// setState 함수를 통한 수정 (정상적인 사용법)
this.setState({
    name: 'Inje'
});

Lifecycle

---

생명 주기 ( 출생 - 인생 - 사망 )

 

리액트 컴포넌트의 생명주기

컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있다는 의미이다.

 

리액트 컴포넌트의 생명주기

• 초록색 : 생명주기에 따라 호출되는 클래스 컴포넌트의 함수들

 

Mounting

생성자(constructor)가 실행되며, 컴포넌트의 state를 정의한다.

 

Updating 

• props가 변경되거나, setState()에 의해 state가 변경된다.
• forceUpdate() : 강제 업데이트 함수 ⏩ 컴포넌트가 다시 렌더링된다.

Unmounting 

• 상위 컴포넌트에서 현재 컴포넌트를 더이상 화면에 표시하지 않게 될 때, ( Unmount 된다. )
• Unmount 직전에 componentWillUnmount 호출

 

Summary

컴포넌트가 계속 존재하는 것이 아니라,
시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.

 

---

🚀 참고

• 처음 만난 리액트(React) , 소플 - 섹션6. State and Lifecycle