[TIL] React[2편] - recast: YouTube 클로닝

이재훈·2020년 10월 17일

JavaScript :)

목록 보기

4/5

Java Script를 배우고 있는 예비 개발자입니다.
사실 What I Learned Last Week 이지만,
과정이 점점 어려워져 블로그 정리하는 것이 많이 망설여지더군요..
그래도 TIL처럼 쓰고! 초반 초심을 되찾아 써보도록 하겠습니다.
배운 것을 정리하고자 하니, 부족한 점이나 오류를 발견하시면
언제든 알려주시면 감사드리겠습니다.
겸허한 마음으로 배우겠습니다! :)

Today What I learned 😎

  📌  Recast: YouTube 클로닝 using React
  	- 컴포넌트 간 상호작용 
  	- Lifting state up 등

  Potter's 영/한 사전 💁🏻

Recast
 1. 재구성하다, 다르게 제시하다.
 2. ...의 배역을 바꾸다.
 				출처 - 네이버

결과물

우선 YouTube 클로닝 한 결과물은 아래와 같다.

구체적으로 나에게 주어진 과제는 리액트를 이용해

CurrentVideo: 현재 재생화면
Videos: 재생목록(우측 리스트)
Search: 비디오 검색

Youtube API를 받아와 위의 기능들이 작동하게 만드는 것이다.

구성

지난 번 포스트에서 state, props, component 등의 설명을 적어놨으니
미래의 나는 그 포스트가서 참고하길 바란다.

바로가기!

어떻게 작전을 짜야할까?

컴포넌트끼리 상호작용을 하게 만들어야 한다!!

상하 컴포넌트 구조 파악 📌

먼저 부모-자식 컴포넌트 관계를 알아내는 것이 중요하다!

우선 아주 기본적인 틀은 부트캠프에서 간단하게 구성한 채로 나머지 부분을 완성하라는 과제가 주어졌다.
이제 내가 해야할 것은 아래의 사진처럼 만들어내고, 기능까지 완벽하게 구현해내는 것이다.

바로 위의 사진에서 볼 수 있듯이
한페이지에 여러개의 독립적인 컴포넌트(Componet)가 존재하고 있는 것을 확인 할 수 있다.
이 컴포넌트들을 상호작용하게 하려면
누구와 누구가 부모-자식 컴포넌트인지 혹은 형제 컴포넌트인지 알아내야 한다.
아래에서 살펴보자!

대략적인 연결구조

위와 같은 구조를 알아내려면
App.js 파일에 import가 어떻게 연결이 되어있는지를 확인해야하며,
App.js의 state가 어디로 props로 연결-연결 되는지를 확인해야 상하구조의 컴포넌트들을 알아낼 수가 있다.

나는 Video List와 Video List Entry가 서로 형제 컴포넌트라 착각하여 삽질과 동시에 이 과제를 시작하였었다. 정말 무의미한 삽질을..

React의 흐름 알아야 한다! 📌

리액트의 데이터 흐름은 `아래`로 흐른다. (역류 X)

즉, 시냇물이 졸졸졸 흐르는 것처럼 리액트 역시 단방향 구조를 이루고 있다.
이를 유념하면서 props를 이용하면 한결 부모 -> 자식 컴포넌트에게 속성 및 데이터 물려주기가 수월해진다.
이 때 물려줄 하위컴포넌트 태그에 id 및 className을 지정해주는 것처럼 하위컴포넌트에 전달될 props의 이름을 지정해주고 무엇을 내릴 것인지 지정해줘야 한다.
<videoList videos={this.state.videos} />

tip) state는 객체로 이루어져 있다!!

클릭이벤트 혹은 텍스트입력이벤트 등등 이러한 흐름을 적용한다면 원하는 컴포넌트에 이벤트를 적용하고 타 컴포넌트와 상호작용할 수 있게 할 수 있다.
즉, 정적인 화면이 이제 동적으로 활동하게 될 것이다.

이는 state 끌어올리기(Lifting State up)와도 연관이 있는데
이는 아래 알아야 할 개념에서 다루겠다.

알아야 할 개념

state 끌어올리기

다시 아래 사진을 살펴보자.

만약 search를 통해 원하는 검색어를 입력 후 검색 버튼 클릭을 하면 해당 키워드의 영상들만 보여지는 동적인 변화를 구현하자면 반드시 component들 간의 상호작용이 있어야 하며, 이 중 "state 끌어올리기"가 필요하다.

여기서 다시 한 번 state & props의 대원칙을 기억할 필요가 있다.

props는 읽기 전용이다.
직접 state를 변경하는 코드는 state를 담고있는 부모컴포넌트에서만 가능하다.
형제 component는 직접적으로 서로 교류 불가

파파고 번역기로 예를 들어보자

컴포넌트를 간략하게 나누면 아래와 같다

그림을 살펴보면 한국어 -> English로 바로 넘기지 않는다.

아무리 자식 컴포넌트인 "한국어"가 자체적으로 state를 가지고 있어도 이 state는 하위 컴포넌트에게 흐르기에 English 컴포넌트로 절대 넘어갈 일이 없는 것이다.
그러면 English 컴포넌트에도 영향받게 하려면 어떻게 해야할까?
--> 한국어 컴포넌트가 자체적으로 state를 가지고 있다면 그 state를 부모컴포넌트로 올리면 된다.

혹은 자체적으로 state가 없더라도한국어 컴포넌트 내에"동적인 변화가 생겨 state를 자체적으로 가질 필요성이 생기는데 English 컴포넌트에게도 영향이 가야하는 상태 변화라면 state 생성 자체를 부모 컴포넌트("파파고 컴포넌트")에 생성하면 되는 것이다.

따라서 "한국어"컴포넌트는 "English" 컴포넌트도 영향을 받게끔 본인의 state를 모두의 부모인 컴포넌트 "파파고"에게 위로 쓕~~ 던져주는 그림을 상상하면 된다.

오.. 잘 날아간다.