Day 18 : Context를 이용한 전역변수 구독 및 수정 기능 구현

전날 짠 컴포넌트들의 모습

 

각 컴포넌트의 jsx 파일 안에 유저 이벤트를 의미하는 버튼들을 만들어두었다

비디오 플레이어는 초마다 재생시각을 바꿔야 하니까 버튼에 t+=1, 북마커의 버튼은 누르면 그 장면으로 이동해야 하니까 t={북마크의시간값} 등등

 

이제 각 컴포넌트의 버튼을 눌렀을때 바뀌는 Time Pointer의 값이 다섯 컴포넌트간에 동기화되는 기능을 구현하면 된다

 

이걸 구현한다면 결과적으로

하나를 눌러도 나머지 컴포넌트들도 해당 시간에 맞는 모습으로 렌더링될 것

예를 들어 차트에서 눈에 띄는 부분을 클릭했으면 영상 플레이어가 해당 장면으로 넘어가서 보여준다거나 등등

 

일단 컨텍스트와 그걸 바꿀 함수를 선언

리액트 공식문서에는 한글로 모든게 다 있다 리액트 최고

 

js에는 () => {} 라는 문법으로 정의역과 치역이 정의되지 않은 빈 함수도 일단 선언해두는 기능이 있다는걸 처음 알았다

맘에 드는 기능

 

그리고 Provider 컴포넌트에서는

useState를 이용해 pointer의 값을 바꾸는 hook을 위에서 선언한 context의 함수로 정의하고,

초기값과 정의된 함수를 전달하는 Context.Provider를 return한다.

 

마지막으로 에디터 페이지의 시간을 공유할 컴포넌트들을 Provider 컴포넌트로 덮어주면

에디터 페이지의 각 기능을 담당하는 컴포넌트들이 pointer 값을 공유하고 값을 수정할 함수도 갖게 되었다.

 

10:00을 타겟팅한 북마크 버튼을 누르고 다른 컴포넌트의 +1버튼을 9번 누르니 t=609를 모두 잘 공유하고 있다

 

중간에 SCSS 연습중인 팀원이 만든걸 main에 merge해서 그라데이션이 생겼다... ㅋㅋ

아무튼 굿

 

 

팀원들은 지금도 열심히 에디터의 각 기능들을 구현하고 있다

하나하나가 기능적으로 구현될 때마다

각 영역의 추상적인 버튼을 진짜 컴포넌트로 갈아끼우는 것으로 쉽게 merge가 가능할 것

 

굿

 

리액트 재밌다