state
리액트에서의 state는 리액트 Component의 상태를 의미합니다! 여기서 상태는 좋고 나쁨의 상태가 아닌..! 변할 수 있는 값을 뜻합니다 :) state를 정의할 때 중요한 점은 꼭 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함해야 한다는 것입니다 😲
state는 JavaScript 객체이다
리액트에서 state는 따로 복잡한 형태로 되어있는 것이 아닙니다! 그냥 하나의 자바스크립트 객체입니다 :)
예제를 하나 보자면..
클래스 컴포넌트의 경우 state를 생성자에서 정의합니다!
함수 컴포넌트의 경우에는 state를 useState라는 hook을 사용해서 정의합니다 :)
생명주기(Lifecycle)
사람의 생명주기는 출생하고 노화가 오게 되면서 결국은 사망하게 되는데 리액트 컴포넌트도 마찬가지입니다! 리액트 컴포넌트도 이러한 생명주기를 가지고 있습니다 😁 컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있다는 의미입니다 
컴포넌트는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트되다가 사라집니다!
Mount
Mount는 컴포넌트가 처음 실행될 때를 표현한 것입니다! 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장합니다! 그 후에 componentWillMount 메소드를 호출합니다 ✨ 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출됩니다 :)
- state, context, defaultProps 저장
- componentWillMount
- render
- componentDidMount
Update
리액트 컴포넌트도 변화를 겪으면서 여러번 업데이트 됩니다!
props가 업데이트될 때의 과정입니다
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
setState 호출을 통해 state가 업데이트될 때의 과정입니다
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
Unmount
Unmount는 컴포넌트가 제거되는 것을 뜻합니다! 더는 컴포넌트를 사용하지 않을 때 발생하는 이벤트가 있는데 componentWillUnmount가 바로 그것입니다 :)
Retrospect 🧐
이해는 되었지만!! 아직은 어렵닷...다른 강의를 들으며 보충해야겠다 ㅎㅎ
