React - 생활코딩(10) Component Event

■ Component에 Event 전달법

> Main component에서 하위 component로 이벤트 전달하고 State 변경하는것이 필요함

( 모듈단위로 component를 구현하고 있기 때문에 )

 

1) Main component level 에서 state 변경할 함수를 설정

   + 이 함수를 props로 하위 component가 access할 수 있도록 전달

 

2) 하위 component에서 event를 생성한 후 click시 상위 사용자 event State 관리하는 함수를 call

 

 

■ 하위 component에서 상위로의 정보전달

1) 하위 component에서 부를 때 parameter를 전달

2) 다음과 같은 3가지 방식으로 전달

> (1), (2) 번은 ev object를 받고 안에서 target / dataset / XXX 로 접근이 가능

   ( a tag 안에 attribute를 data-XXX 를 주었을 때 )

> (3) 번 방식은 bind의 param으로 추가적으로 argument를 function에 passing할 수 있음

   이 방식으로 id 값을 전달하여 상위 callback의 인자로 전달

 

 

※ this와 binding 글 참조

korshika.tistory.com/61

JavaScript의 this

---

 

■ State & Props와 Component

1) 

> Component 안에서 전달받은 props를 변경하면 오류가 발생 ( read only )

   Component에서 바꿀 수 없음

 

 

2) Redux 사용 이유

> read-write를 용이하게 진행할 수 있음

( 지금까지 구현한 것은 순수 react로 구현한 것 )

---

참조 :

www.youtube.com/watch?v=NFR7vDArVlY&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=24

www.youtube.com/watch?v=hR5H0OFksx8&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=25

www.youtube.com/watch?v=11mTvRtXx4g&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=26

www.youtube.com/watch?v=b9IaQ3Dkucw&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=27