(React) Youtube View Cloning by React

중점 사항

• 리액트로 클라이언트를 구성하려면 가장 먼저 컴포넌트 구조를 구상하고, 각 컴포넌트의 스트림을 만드는 것이 가장 중요하다.

  리액트는 단방향 데이터 흐름을 가지고 있기 때문에 이 특징을 유념하면서 "데이터가 흘러갈 길"을 만드는 것이 중요하다.

• props는 리액트에서 컴포넌트가 가지는 데이터를 말하는데 위에서 만들어 놓은 " 데이터의 길"을 이용해서 데이터를 활용해야 하는 하위 컴포넌트까지 내려줘야 한다.
  HTML에서 엘리먼트에 속성을 지정해주는 방식(HTML 엘리먼트의 id, class처럼)으로 하위 컴포넌트에 props를 전달할 수 있다.
• 동적인 페이지를 구현하는 것이기 때문에 변동되는 데이터의 부분도 있는데 이러한 케이스를 state에 담아 관리하고 페이지 내 이벤트 핸들링을 대응해야 한다. state와 이를 변경하는 이벤트 핸들러 함수의 경우에는 같은 상위 컴포넌트에 있으면서 하위 컴포넌트에서 핸들러와 state를 props로 받아 state를 변경해야 하는 경우 "state 끌어올리기"를 구현한다.
• 리액트에서는 DOM을 직접 건드리는 행위를 지양해야 하는데(가상 DOM을 이용해 기존의 내용과 비교해 변경된 사항만 반영해 준다는 리액트의 장점을 살리기 위해), 하위 컴포넌트에서의 데이터 입력 상황에서 유효한 데이터를 어디에서 관리할 것인지 고민해야 한다.

  이문제는 상위 컴포넌트에서 state로 데이터를 넘겨주는 이벤트 핸들러를 구현하는 방법으로 해결할 수 있다.

리액트의 라이프 사이클

• 만약 리액트의 method들이 대화를 할 수 있다면 이런 식으로 대화가 흘러갈 것이다.

  1. constructor
     1-1 state는 여기에 둘게 끝!
  2. Render: state에 인포메이션이 있어?
     2-1 state에 정보가 있구나, 그럼 바로 가져갈게! component에 뿌리는 함수 실행시킬게!
     2-2 정보가 없구나? 일단 loading 페이지 render 시킬게 끝!
  3. componentDidMount: render 끝나면 그럼 새롭게 fetch해서 인포메이션에 넣어줄게!(5)
  4. 인포메이션을 component에 뿌리기: state 가져와서 map을 이용해 component에 뿌려줄게!
  5. 새롭게 fetch해서 인포메이션에 넣기" 나는 순서가 중요한 함수야 (async)
     5-1. 새롭게 정보가 필요해? 그럼 fetch하는 함수 불러서 값 가져올게 (6) 니가 완료되어야 그 값을 가지고(await) 다음 내용을 실행할 수 있어.
     5-2. 그리고 그 값을 setState해서 state에 넣어주겠어 끝.
  6. fetchAPI: query나 상세 요청내용 주면 fetch api로 response 가져다 줄게, 혹시 에러아면 알려줄게!
  7. response로 정보받아서 setState하기 : response 전달해주면 setState할게
  8. setState: state가 변경되었네? 그럼 비교해보고 다시 render 해야겠다.

구조 만들기