[React] State와 상태 주기

1. React의 State

🔔 React의 State(상태)란?!

= React Component의 State = React Component의 Data

🔔 State 정의하기

State는 개발자가 정의한다.
State를 정의할 때에는, 렌더링이나 데이터 흐름에 사용되는 값만 State에 포함시켜야 한다.
State는 Javascript 객체이다.

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

📌 클래스 컴포넌트의 생성자 함수

모든 클래스 컴포넌트에는 생성자 함수(constructor)가 존재한다. 생성자 함수는 클래스가 생성될 때 실행되는 함수이다.

📌 클래스 컴포넌트에서의 state

클래스 컴포넌트의 경우 state를 생성자에서 정의한다.
this.state 코드로 현재 컴포넌트의 state로 정의한다.

🔔 State 수정하기

State는 직접 수정하면 안 된다.

✔ 잘못된 사용법 : 직접 수정

this.state = { name : 'Inje' };

✔ 정상적 사용법 : setState 함수를 통한 수정

this.setState( { name : 'Inje' } );

2. 리액트 컴포넌트의 LifeCycle

리액트 컴포넌트도 생명주기를 가진다.

📌 componentDidMount, componentDidUpdate, componentWillUnmount는 생명주기에 따라 호출되는 클래스 컴포넌트 함수로서 생명주기 함수이다.

1) 출생 : Mounting

✔ 컴포넌트가 constructor을 통해 생성된다.
✔ 생성자는 state를 정의한다.
✔ 컴포넌트가 렌더링되며, 이후 componentDidMount 함수가 호출된다.

2) 인생 : Updating

✔ 리액트 컴포넌트도 여러번 변화를 겪으며 Update 된다.
✔ 이 때는 props가 변경되거나, setState()에 의해 state가 변경되거나, forceUpdate()라는 강제 업데이트 함수로 인해 컴포넌트가 다시 렌더링된다.
✔ 렌더링 이후 componentDidUpdate 함수가 호출된다.

3) 사망 : Unmounting

✔ 리액트 컴포넌트도 언젠가는 사라진다.
✔ 컴포넌트는 상위 컴포넌트에서 해당 컴포넌트를 더 이상 화면에 표시하지 않을 때 unmount된다.
✔ unmount 직전에 componentDidUpdate 함수가 호출된다.

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