[가위바위보] Component Lifecycle

Class 

// Lifecycle of Class component

// 컨스트럭터 - state에 있던 것들이 렌더가 될때 클래스에 붙는다. 혹시 ref가 있다면 ref까지 렌더링 된 후에 처리를 한다. 그렇게 첫번째 렌더링이 끝났다면 componentDidMount가 실행된다.
// 그러면 화면에 보인다. 그러면 component 안에서 setState를 하거나, 부모가 props를 바꿀 때, 이제 리렌더링이 일어나잖아요.
// 그 리렌더링이 일어날 때, shouldComponentUpdate에서 return true가 되는 경우, 어? 리렌더링 해줘야돼. 니까 리렌더링 해줘야된다. 그럼 리렌더링이 일어난다.
// 리렌더링이 일어난 후에는 componentDidUpdate,
// 부모는 나를 없앨 수 있어서, 부모가 나를 없앴을 때 (자식컴포넌트)는 componentWillUnmount가 실행된다. 그럼 그 후에 화면에서 사라져버린다.


// 클래스의 경우 -> constructor -> render -> ref -> componentDidMount
// -> (setState/props 바뀔 때) -> shouldComponentUpdate(true) -> render -> componentDidUpdate
// 부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸



// 컴포넌트가 첫 렌더링 된 후. 렌더가 성공적으로 실행됐다면 그 다음에 실행된다. (after render successfully performed,)
componentDidMount() {}

// return true의 경우 리렌더링 해줘야하나? true
shouldComponentUpdate() {}

// 리렌더링 (setState / props가 바뀌었을 때)
componentDidUpdate() {}

// 컴포넌트가 제거되기 직전. 부모가 나 컴퍼넌트를 없앴을 때 remove comp
componentWillUnmount() {}

 

Hooks

 

 

 

 

 

Class vs Hooks 비교

클래스는 가로로 (componentDidMount.. 등에서 조건문으로 분기를 나눠서 사용. )

훅스는 세로로 보기 (useEffect가 세가지 모두 담고있음, state별로 useEffect사용)