이야기는 많이 들었던 프론트엔트의 멋쟁이 라이브러리 리액트를 활용한 과제를 진행했다.
우선 리액트 공식문서를 보면서 트위터 클론 앱을 만든 상태이다.
이번에는 유튜브 클론 앱을 만들어보았다.
💎 1. 성취목표
- React 기본
- 컴포넌트 단위 개발의 장점 알기
- (선언적인 형태의 문법)를 사용하는 장점을 이해
- React 주요 개념과 사용법
- 컴포넌트 VS 클래스 컴포넌트
- props의 특징과 규칙
- props VS state
- 상태 변경 방법과, 그 이유를 이해
- 이벤트 처리
- lifecycle을 통한 작동 원리를 이해
- React 컴포넌트 간 데이터 흐름 및 상호작용의 원리 이해
처음에는 와 이걸 어떻게 다 익히지? 했는데, 다 설명할 수 있게 되었다.
코드스테이츠 커리큘럼 굉장하다. 친절한 가이드라인대로 따라가다보면 깨닫게 된다.
💎 2. 스프린트 파악
- 우선
npm install을 통해 필요한 것들을 설치하였다. package.json에scripts부분을 통해start,storybook,test명령어를 확인하였다.npm run start를 하면 앱이 실행되고, 아직 아무것도 구현되지 않았음을 확인할 수 있다. (컴포넌트가 제대로 연결되어 있지 않다. 기본적인 틀은 실제로는 구현되어있다.) http://localhost:8080 를 통해 확인하였다.npm run storybook를 하면 시각적으로 컴포넌트들이 어떻게 보이는지 확인할 수 있다.(storybook 처음 사용해봤는데, 과제하면서 어떤 데이터가 넘어오는지, 오류메세지와 콘솔을 효율적으로 확인할 수 있어서 수월하게 진행할 수 있었다.)- React Developer Tools 설치 (props 나 state 를 쉽게 확인하고 디버깅하는데 쉽다는 장점을 가지고 있었지만, 생각보다 활용도가 적었다. 콘솔찍으며 확인하는게 더 편했다. storybook에 보이는 컨포넌트가 너무많아서 매번 검색하는 게 귀찮았다.)
src/components/__test__/fakeData.js에 임시로 사용할 수 있는 가짜데이터가 있는 것을 확인하였다. (추후에 유튜브API를 가져와서 진짜데이터로 구현하는 걸로 알고있다. 같은형식의 데이터로 구성되어있어서 연습하기 좋다.)
💎 3. 컴포넌트 관계 파악
그림으로 정리해봤다.
- App : 최상위 컴포넌트,
index.js에서 DOM에 직접 렌더링 된다. - Nav : Search 컴포넌트에 대한 컨테이너 컴포넌트.(추후에 구현)
- Search : 검색창 (추후에 구현)
- VideoPlayer : 선택한 비디오를 1개를 재생할수 있게 구현
- VideoList : 동영상 목록
- VideoListEntry : 목록중 하나의 비디오의 제목을 클릭하면, 해당 비디오가 VideoPlayer 컴포넌트에서 재생.
이번에 구현한 컴포넌트는 App, VideoPlayer, VideoList, VideoListEntry 이다.
App은 class 컴포넌트로 구현했고, 나머지는 함수 컴포넌트로 구현하였다.
상태데이터를 다 넘겨줘야했는데, App 가 공통부모 컴포넌트라 App에서 데이터를 관리하는 게 효율적이기 때문이다.
💎 4. 코드 작성
-
npm run test를 확인하여 순서대로 테스트를 통과해야겠다고 생각했다. -
VideoListEntry.js파일에서 하드코딩 되어있는 부분을 props 를 이용해서 동적으로 데이터를 뿌려줬다. -
VideoList.js에 들어가서 fakeData 를 map 을 이용하여 뿌려줬다.
(map을 이용해서 JSX를 할 수 있는 이유는[<VideoListEntry />,<VideoListEntry />]이런식으로도 구현되기 때문이다.)테스트 코드를 확인하고, 테스트에서 props 가 videos로 되어있는 것을 확인후
fakeData.videos.map에서props.videos.map로 변경하니까VideoList.js관련 테스트를 모두 통과하였다.
(테스트코드에서는 데이터 수를 변경하였는데, fakeData의 경우 3개로 고정되어있어서 모든 테스트가 통과하지 않았다) -
VideoPlayer.js파일에서도 하드코딩 되어있는 부분을 props 를 이용해 동적으로 데이터를 뿌려줬다. -
마지막 테스트 항목인
App.js가 제일 어려웠다.
-
이전항목에 대해 테스트를 돌릴때마다 에러가 떠서 많은 파일들이 줄줄이 소환되어 터미널에 보였다.
에러메세지는Cannot read property 'map' of undefined.
황당했다. 잘 돌아가는 map 이 어째서 에러가 뜨는가.
구글링을 통해서 많은 글을 확인했지만, 깔끔하게 해결할 수 있는 코드스킬은 없었고, 아마 데이터를 가져오는 것에 문제가 생겨서 그렇다는 것을 깨달았다. -
일단은 에러메세지를 무시하고 테스트항목대로 App 컴포넌트를 class 로 구현하였다.
this.state에 fakeData를 넣어주고, 렌더링부분을 다음과 같이 변경했다.
render() {
return (
<div>
<Nav />
<div className="parent">
<VideoPlayer video={this.state.changeVideo} />
<VideoList videos={this.state.fakeData} />
</div>
</div>
);
}여기까지 구현하니 VideoListEntry의 제목을 클릭하면, VideoPlayer의 비디오가 갱신되어야 합니다 이 항목빼고 모두 통과하였다. (클래스로 완전하게 구현해서 테스트를 돌리니 map 에러나는 부분은 자연스럽게 해결되었다.)
💎 5. 마우스 이벤트
App.js에서 마우스관련 함수를 this 로 바인딩해주고,
state를 바꿔주는 setState()를 쓰는 함수를 해당 파일에 작성하였다.- 해당 함수는
VideoList에 넘기고, 또VideoList컴포넌트에서VideoListEntry에 props 로 함수를 넘겨줬다. - 그리고 받은 props 를
<div className="video-list-entry-title" onClick={props.gotoApp}>{props.video.snippet.title}</div>
이런식으로 구현하여, 해당 타이틀을 누르면 setState가 작동되게 하였다. - setState를 통해 넘겨줄 데이터를 filter를 통해 클릭하는 제목 부분에 맞는 데이터인지 확인하고, 해당 데이터를 state에 업데이트 후, 해당 데이터를
VideoPlayer컴포넌트에 props 로 넘겨줬다.
이렇게 하고 'npm run test' 하면 모든 테스트 통과!
'npm run start' 하면 모든게 잘 작동된다.
아래 캡쳐처럼 리스트에 있는 제목을 누르면 큰 화면에서 재생된다.
💎 6. 후기
리액트 매력적이다. 설연휴를 이용해서 공식문서에 있는 예제를 실습하며 공부한 보람이 있었다. 원리를 알고 있어서 수월하게 코딩할 수 있었다.
처음 props 를 봤을 때, 저게 뭐지 했는데 지금은 너무 편하게 활용하고 있다.
내가 정하지 않은 props 가 콘솔화면에 찍혔을 때, 엄청 당황했었다.
테스트케이스 코드를 보고 이게 여기에서 찍힌거구나 알고 해당 값을 조정했을 때, 테스트가 주르륵 통과됐다. 이 때가 제일 즐거웠다.
역시나 마우스이벤트를 줄 때가 제일 힘들었다.
그래도 유어클래스에서 LifeCycle 과 리액트 데이터흐름, state끌어올리기 부분을 보며 감을 잡은 상태여서 처음부터 방향을 올바르게 잡았었다.
마우스 이벤트를 주기위해 props를 넘기고 그 컴포넌트의 props를 넘기고 넘기는 과정에서 재귀함수의 향기를 느낄 수 있었다.. ㅎ
이런 방식으로 하는 게 맞는지 의문이 들었지만, 마우스클릭마다 콘솔부분을 찍어보면서 한걸음씩 정답으로 나아갔다.
DOM 으로 html과 js를 따로 작성할 때 진짜 힘들고 싫었는데,
리액트를 하면서 마음의안정을 얻었다.
리액트 진짜 마음에 든다. 데이터가 위에서 아래로 흐르는 것도 좋고, state를 끌어올리는 부분도 재미있었다.
