🎯 Achievement Goals

recast.ly(youtube) 클론

👉 React-Recast.ly

오늘은 주제가 recast.ly 인 리액트 과제였는데, 이게 도대체 뭔가 했더니 유튜브 클론 코딩이였다… API를 불러와서 검색기능까지 구현하는건 다음주에 하고, 이번주는 더미데이터(가짜데이터)를 가지고 UI를 그린 다음에 오른쪽에 비디오리스트 중에 하나를 클릭하면 그 동영상을 렌더링 하는 것이 과제였다.

과제 내용

recast ly

이번 과제는 어제 했던 트위터처럼 처음부터 구현하는게 아닌, CSS는 이미 제공이 되어 있었다. 내가 해야할 일은 컴포넌트안에 코드들을 작성해주면 알아서 구현이 되는 것이였다.

recast ly_2

컴포넌트는 이런식으로 쪼개져있었고, 오늘 내가 해야할 것은 VideoPlayer에 동영상을 렌더링하고, VideoList에 동영상 목록을 나오게 해야하고, 각 VideoListEntry의 제목을 누르면 왼쪽 VideoPlayer에 렌더만 되면 되는 것이였다.

코드

이미 fakeData라는 가짜 API 형태 객체가 주어졌다. App.js는 클래스 문법으로 작성하는 것도 조건중에 하나였다.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videos: fakeData
    };
  }

  onVideoClick() {
    console.log("클릭 확인");
  }

  // 화면을 그리는 부분
  render() {
    return (
      <div>
        <Nav />
        <div className="parent">
          {this.state.videos && <VideoPlayer video={this.state.videos[0]} />}
          <VideoList
            videos={this.state.videos}
            // List 컴포넌트에 클릭이벤트를 넘겨준다.
            onVideoClick={this.onVideoClick.bind(this)}
          />
        </div>
      </div>
    );
  }
}

일단 App.js의 전체적인 틀은 이러했고, 클릭이벤트가 잘 작동하는지 콘솔을 통해서 확인작업을 하였다. 그리고 각 비디오들을 리스트 목록에 나오게 하기 위해서 VideoList 컴포넌트를 map 함수를 통해 VideoListEnpty들을 렌더했다.

const VideoList = ({ videos, onVideoClick }) => {

  return (
    <div className="video-list media">
      // 리스트를 렌더링하기 위해 map 함수를 사용한다.
      {videos.map((video) => {
        return <VideoListEntry
         // 각 entry가 가지는 고유의 key 값 중요!! 
          key={video.id.videoId} 
          video={video}
          onVideoClick={onVideoClick}
        />
    })}
  </div>
  )
};

클릭 이벤트

React 데이터의 흐름은 부모 컴포넌트로 부터 자식 컴포넌트로 전달해주는 흐름이다. 즉, Top-Down방식으로 이루어진다. 이번 과제가 동영상 제목을 누르면 그 동영상이 플레이 화면에 나와야 한다.

나도 App.js에 onClick 함수를 만들어 놓고, 동영상 제목을 눌렀을 때 이벤트가 실행될 수 있게 이벤트를 VideoListEntry 컴포넌트까지 전달해준 다음, 제목에 onClick 함수을 달아주었다.

const VideoListEntry = ({ video, video: { snippet }, onVideoClick }) => {
    return (
      // 생략.....
        <div
        className="video-list-entry-title"
        // 제목에 이벤트를 달아준다.
        onClick={() => onVideoClick(video)}
        >{snippet.title}
        </div>
        <div className="video-list-entry-detail">{snippet.description}</div>
    )  
}

🙌 느낀점

트위틀러, 유튜브 둘 다 정말 재밌게 했던 것 같다. 만약 미리 배우지 않았다면 나도 이번 스프린트 과제는 따라가기 무척 힘들었을 것이다. 나도 처음 리액트를 배웠을 때는 정말 아무것도 몰랐고 컴포넌트랑 데이터의 흐름, 라이프사이클 등 모든게 낯설고 어렵기만 했다. 내 페어분이 정말 어려워하고 아무것도 이해를 못하고 있는 모습을 보니… 나도 미리 배우지 않았었더라면 페어분과 같은 처지였을 것 같았다.

하지만 지금은 많이 다뤄보니 대충 감은 찾은 것 같다. 앞으로도 꾸준히 더 열심히 공부하고 주말에는 리액트 뿐만 아니라 이번주에 배웠던 내용들을 충분히 복습하자!

👊 내일의 TIW(today I Will)

이번주 스프린트 복습(http모듈, express, react 등등..)

← Previous Post Next Post →

React-recast.ly 만들기

📅 TIL #56

🎯 Achievement Goals

👉 React-Recast.ly

과제 내용

코드

클릭 이벤트

🙌 느낀점