state 끌어올리기 / props drilling(프로퍼티 내려꽂기)

State 끌어올리기를 쓰는 이유?

: 종종 여러 컴포넌트에서 동일 데이터의 state를 변경해야하는 경우가 생기는데, 이 때 가장 가까운 부모 컴포넌트로 state를 끌어올리는 것이 좋다.

예를 들어 sprint 파일의 App.js에서 state를 바꾸는 이유는?
videoplayer.js와 videolistEntry.js가 만나는 부모 컴포넌트가 App.js이기 때문이다!

 

 

State 끌어올리기를 쓰는 방법?

: event handler를 부모 컴포넌트에서 setState를 사용해서 작성한 후 props로 내려준다!

그래서 그 이벤트가 실제로 실행되는 컴포넌트에서 전달인자로 props를 받아서 이벤트 함수를 실행시켜준다 (ex. onClick)

 

예를 들어 sprint 파일에서 이벤트에서 인자를 video로 받고 있다.
하지만 App.js에는 실제로 선택하는게 없다.
그래서 props로 VideoList -> VideoListEntry로 내려줘야한다.
VideoListEntry에서 onclick에 익명함수를 전달하는 이유는 video를 전달인자로 받기 위해서이다.
그냥 함수만 넣으면 이벤트 객체가 전달된다(e.target이런거)