[TIL]201007 Recast.ly

Chaegyeom·2020년 10월 15일
0

TIL

목록 보기
48/77
post-thumbnail

React에서 데이터 흐름

리액트에서 부모 컴포넌트나 자식 컴포넌트 모두 특정 컴포넌트가 어떤 상태인지 알 수 없다. 이러한 특징 때문에 state가 로컬 또는 캡슐화라고 불리기도 한다.
컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

일반적으로 이런 부모에서 자식 방향으로만 이동되는 데이터 흐름을 “하향식(top-down)” 또는 “단방향식” 데이터 흐름이라고 한다. 모든 state는 항상 특정한 컴포넌트가 소유하고 있으며 그 state로부터 파생된 UI 또는 데이터는 자신의 “아래”에 있는 컴포넌트에만 영향을 끼칠 수 있다.

state 끌어올리기(Lifting State Up)

같은 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있을 때가 있다. 예를 들면 원화를 입력했을 때 다른나라들의 돈으로 환산해주는 환율계산이나 단위변환등이 있을 것이다

이럴 때 한쪽에 값을 입력하면 다른 컴포넌트가 동기적으로 해당 값을 변환하게 하기 위해서 state를 가장 가까운 공통 부모 컴포넌트로 올려주는게 좋다 그리고 이것을 state끌어올리기 라고 한다.

Recast.ly

어제에 이어서 Recast.ly스프린트를 진행하던 중, 오른쪽의 영상의 리스트를 클릭하면 현재의 영상이 바뀌도록 구현하기 위해 시간을 많이 투자했다.

VideoEntry컴포넌트에서 클릭을 하면 VideoPlayer컴포넌트가 바뀌도록 하기 위해서

App컴포넌트에 videoClick이라는 함수를 만들어서 VideoList -> VideoListEntry컴포넌트 순으로 내린 후 클릭을 하면 함수를 통해 App컴포넌트의 state가 바뀌도록 했다. 이렇게 하기 위해서 Data를 공통부모인 App컴포넌트로 옮기면서 state끌어올리기를 사용해볼 수 있었다.

글로쓰니 금방 해낸 것처럼 보이지만 거의 3시간 동안의 삽질을 통해 겨우 구현해 낼 수 있었는데 오늘 저녁에는 생성해 놨던 유튜브API를 접목시켜서 실시간데이터를 구성해봐야겠다.

profile
주니어 개발자가 되고싶은

0개의 댓글