React - 생활코딩(9) State & Props + Render

■ State / Props와 Render의 관계

> Render 메써드에 state나 참조하는 props가 있을 시

state나 props가 어떤 방식으로던 변경이 이루어지면

render가 재호출되며 처음부터 다시 페이지를 그리게 됨

 

※ main Component의 render가 reload되면 하위 component들이 가진 render 메써드도 차례로 다시 호출 됨

∵ ▲main Component는 state변경으로 인해 reload되고, 하위 component들은 그 state에서 props를 받으므로

   차례로 변경되는 것

 

 

■ Mode 도입

> Mode에 event를 설치하여 반응형으로 만드는 방식은?

---

 

■ Event 추가

>  a tag로 href가 있으면 클릭시 reloading이 되므로 event handler function에서

    event를 받고, preventDefault 매써드로 페이지 reloading 막음

> 함수 객체를 받아오고 attribute는 onClick 으로 onclick이 아님

> this를 전달받은 event listener 함수에서 this가 undefined이므로(아마 use_strict 모드인듯?)

this를 binding 하여 setState Method를 사용하여 state가 변하였다는 것을 알려주어야 함

this에 대한 내글 참조 : korshika.tistory.com/61?category=955367

 

function 안의 this는 class의 this와 다른 context이므로 binding으로 명시적으로 지정해줌

 

 

■ setState 함수 사용 이유

> 변경하고 싶은 값을 Object 객체로 전달

> 매써드 사용하지 않고 값만 변경하면 state가 checking되지 않아서 reloading이 안됨

※ Main component constructor에서는 constructor에서 그냥 state 하드코딩을 하면 됨

 

---

참조 :

www.youtube.com/watch?v=kviidk347nU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=19&t=26s

www.youtube.com/watch?v=3h7MidkDTBU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=20

www.youtube.com/watch?v=o7Id7GMcuFo&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=22

www.youtube.com/watch?v=PTRpJNMiMdA&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=23