[React] State와 Lifecycle

1. State

- 리액트 Component의 상태, 즉 리액트 Component의 변경 가능한 데이터

- 개발자가 직접 정의해서 사용

- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함(그렇지 않은 값들은 instance로 정의하면 됨)

- JavaScript 객체

- 직접 수정하면 안됨 (setState 활용)

 

class의 경우 state를 생성자에서 정의 vs 함수 Component는 state를 useState()를 사용하여 정의

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

 

2. LifeCycle

- 컴포넌트의 생명주기 (componentDisMount, componentDidUpdate, componentWillUnmount)

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