State

---

리액트에서 state 는 리액트 컴포넌트의 변경 가능한 데이터를 의미합니다. 개발자가 직접 정의해서 사용하게 되며, 렌더링이나 데이터 흐름에 사용되는 값만 state 에 포함시켜야 합니다. 그렇지 않은 값은 컴포넌트의 인스턴스 필드로 정의하면 됩니다.

state 는 하나의 자바스크립트 객체이다.

class LikeButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {      // 컴포넌트의 state를 정의하는 부분
            liked: false    //
        };                  //
    }

    ...
}

모든 클래스 컴포넌트에는 클래스가 실행될 때 실행되는 constructor 생성자 함수가 존재합니다. 클래스 컴포너는 state를 생성자에서 정의합니다.

이렇게 정의한 state는 정의된 이후 일반적인 자바스크립트 변수를 다루듯이 직접 수정할 수는 없습니다.

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

// setState 함수를 통한 수정 (올바른 사용법)
this.setState({
    name: 'Ellie'
});

React에서 state는 컴포넌트의 렌더링과 연관이 있기 때문에 마음대로 수정하면 개발자의 의도대로 작동하지 않을 수도 있다.

Lifecycle

---

Lifecycle 은 주로 클래스 컴포넌트에서 사용됩니다. 생명주기라는 뜻으로 컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있다는 의미입니다.

출처

1. Mounting : 컴포넌트가 생성되는 시점
   컴포넌트의 컨스트럭터, 즉 생성자가 실행됩니다. 생성자에서는 컴포넌트의 state를 정의하게 됩니다. 컴포넌트가 렌더링되고, componentDidMount함수가 호출됩니다.

2. Updating : 컴포넌트가 업데이트되는 과정
   컴포넌트의 props가 변경되거나, setState함수 호출에 의해 state가 변경되거나, falseUpdate라는 강제 업데이트 함수 호출로 인해서 컴포넌트가 다시 렌더링됩니다. 렌더링 이후에, componentDidMount함수가 호출됩니다.

3. Unmounting : 컴포넌트가 사라지는 과정
   상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 Unmount함수가 호출되고, Unmount됩니다.

이 3가지 생명주기 함수 이외에도 다른 생명주기 함수가 존재하지만, 지금은 클래스 컴포넌트를 거의 사용하지 않기 때문에 개념만 알고 넘어가도 됩니다.

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