React 실습 -7

바로바로 흐름 끊지 말고 가보자ㅏㅏㅏ

 

지금까지 작성된 코드

지금 코드를 보면 이렇게 되어 있겠지?

 

좋아좋아!

작업한 것 중에 react component에서 사용하는 유일한 function은 render function이야!

add minus function은 둘 다 우리가 만든거잔아?

 

component랑 react class component는 단순히 render말고 더 많은걸 갖고 있어!

이 component들은 life cycle method를 가지는데

life cycle method는 기본적으로 react가 component를 생성하고 없애는 방법이야!

 

component가 생성될 때, render 전에 호출되는 몇가지 function이 있어!

component가 render 된 후, 호출되는 다른 function들이 있는데

예를 들어서, Add를 클릭하고 +1 +1 +1을 누를 때,

component가 update될 때 호출 되는 다른 function이 있어

 

물론 전부를 보지는 않을거야!

여기서 가장 중요한 것들만 알아보자!!!!

 

Mounting

태어나는 것과 같다고 보면 돼

호출되는 function이 하나 있는 constructor야

constructor는 react에서 오지 않았어

constructor는 JS에서 class를 만들 때 호출되는거야

중요한건 JS에서 온다!

따라서 어딘가에서 우리는 constructor를 가지고 있는걸 보게 될거야

여기서 테스트! 

constructor의 콘솔과 render의 콘솔 중 누가 더 먼저 나타날까?

런해보면!(super는 신경쓰지마! 잊어버려!)

두둥!!

보다시피 constructor는 시작 전에 호출됐고 그 다음 render가 호출 됐지? 신기방기

 

정리하자면 component가 mount 될 때, component가 screen에 표시될 때,

component가 Website에 갈 때 constructor를 호출 해

그리고 나서 render야!

 

이 후에 component가 render할 때 componentDidMount!

기본적으로 componentDidMount는 우리에게 알려줘! "야 이 component 처음 render 됐어"

 

이제 render를 해보자!

componentDidMount function을 추가해보자!!

결과는?!?!?!??!

render - componentDidMount 순서야! 오오미 신기방기~~

이게 componentDidMount얌~

이제 Updating으로 가자ㅏㅏㅏㅏ!

 

Updating

일반적인 업데이트를 의미해

업데이트의 원인은 너야 You!

이런거라도 있어야 재미있지..

너가 add, minus를 클릭해서 state를 변경할 때! 그게 업데이트야!!

너가 만든 업데이트라구!

 

component가 업데이트 될 때, 호출되는 많은 function들이 있어

그 중 하나가 getDerivedStateFromProps인데 이건 여기서 이야기 노노할거야

 

shouldComponentUpdate

이건 기본적으로 업데이트를 할지 말지 결정하는 것에 대한건데 이것도 안해 안해~ 좋다좋아!

 

componentDidUpdate 이건해야짘ㅋㅋㅋㅋㅋ

추가 해보자 !

add나 minus를 클릭하고 결과!

render - componentDidUpdate 순서!

따라서 setState를 호출하면, component를 호출하고, 먼저 render를 호출한 다음

업데이트가 완료됐다고 말하면 componentDidUpdate가 실행될거야!

 

멋져부러잉! 이제 component 대부분을 거의 제어할 수 있게 됐어!!!

 

이제 component가 unmount될 때! 고고

 

Unmounting

component가 죽는걸 의미해(페이지를 바꿀 때, state사용해서 컴포넌트 교체할 때 등 다양한 방법이 있지)

해보고 싶은데 이건 시뮬레이션을 못해서 ..

다음에 기회되면 혼자 해봐...

 

 

이렇게 해서 우리는 component life cycle을 알게 됐어!

우리는 이제 componentDidMount, componentDidUpdate를 알고 render를 알아!

다음 포스트에 한번 더 요점 짚고 갈테니까 걱정하지 말고 넘어가자고!

 

고고고곡ㄱㄱㄱㄱㄱㄱㄱㄱ

 

출처: nomadcoders.co/