Immersive sprint : recast.ly

이번 스프린트 흐름

1. index 파일은 App 컴포넌트를 최종적으로 랜더링하는 곳이다. props로 API 키와 search 값을 아래의 컴포넌트에 뿌려주기 위해 넣어준다.

2. App 컴포넌트는 클래스로 만들어 주어 상태변화에 대해 life cycle을 사용할 수 있게 한다.

• 2-1. 초기의 값은 기본으로 초기화 해주고 componentDidMount를 통해 처음 랜더링 되는 상태를 설정해준다. getYouTubeVideos 메서드를 통해 파라미터로 받아준 결과값을 뿌려주게 된다.
• 2-2. getYouTubeVideos 메서드는 파라미터를 받아 그것을 query의 값으로 설정하고 그 아래 searchYouTube의 메서드를 통해 초기값을 query의 값으로 바꿔주는 역할을 하게 한다.
• 2-3. handleVideoListEntryTitleClick 메서드는 파라미터로 들어온 값을 현재 비디오로 설정을 해주게 된다.
• 2-4. App 컴포넌트에서는 Nav,VideoPlayer, VideoList 컴포넌트를 가지고 있다. 이러한 컴포넌트에 각자 뿌려줘야 할 이벤트들을 props로 넘겨주어야 한다.

3. 해당 컴포넌트는 어떤 역할을 하는가에 대해 집중하면 좋다. VideoList 컴포넌트는 가져온 비디오와 관련된 리스트들을 보여주는 컴포넌트이다. 그리고 리스트의 비디오를 눌렀을 때 그 비디오와 관련된 리스트들을 다시 보여주는 곳이다. 따라서 props로 이 둘과 관련된 내용을 넘겨주어야 한다.

4. VideosList 컴포넌트에서 2개의 props를 받아준다. 이 컴포넌트 안에는 VideoListEntry 컴포넌트를 포함하고 있다. map메서드를 통해서 VideoListEnty 컴포넌트 마다 props를 내려준다.

5. VideoListEntry 컴포넌트에서 props로 받아온 데이터를 입맛대로 가공해서 JSX 문법을 통해 나타낼 데이터를 보여준다.

6. Nav 컴포넌트는 Search 컴포넌트를 포함하고 있다. Search 컴포넌트까지 props를 내려주고 Search 컴포넌트에서 새로 랜더링되면서 기존의 초기값을 검색에 입력한 데이터로 바꿔줄 수 있게 구현해야 한다.

7. Nav 컴포넌트에서 비디오를 검색해서 새로운 비디오를 가져올 수 있는 메서드를 하나 만들어서 이를 props로 넘겨준다. 이때 bind를 해주어야 한다.

8. Search 컴포넌트에서 이를 받아서 아래로 뿌려준다. 검색버튼(돋보기모양버튼)을 눌렀을 때 input태그에서 입력된 값을 가져와서 아까 만든 메서드에 파라미터로 넘겨준다.

리뷰

1. 현재는 클릭했을 때만 값을 찾아주었는데 Enter 키룰 눌렀을 때에도 동일한 결과 값이 나오도록 구현해보기. onChange,onKeydown 등의 메서드를 이용해볼 것! 이 둘을 모두 적용시키기 위해서는 어떻게 해야할지 생각해보자.

2. 리액트에서 직접 DOM에 접근할 경우가 발생할 때도 있다고 한다. 그러한 상황 알아보기. input 의 값을 가져올 때 ? 등 특수한 경우가 있다고 함.

3. porps로 넘길때 {} 넣고 안 넣고의 차이점이 무엇인지 알아보기. props를 그대로 넘겨야 할 때? 결과값을 넘길 때? 인지 정확히는 잘 모르겠다.

4. 언제 bind를 써야하는지 알아보기. 느낌적으로는 새로운 데이터로 덮어쓸수 있는 상황일 때 사용하는 것 같다.

5. 코드 리뷰를 했을 때 흐름을 설명하면서 체계가 잡혀가는 느낌. 함께 다른 접근법을 통해 오류를 찾아가면서 공부가 되었다.

6. debounce? 개념은 알 것 같으나 제약을 거는 방식에 대해 더 알아보기.

배운점

리액트에서 컴포넌트와 관련하여 props와 state관리에 대해 배울 수 있었고, 구현하기 위해 설계 및 흐름 등을 명확히 해놓고 들어가야 헤메지않고 진행될 수 있다는 것을 알았다. 설계에 많은 비중을 둬야 한다. 중요! 바로 코드 구현을 시작하면 중간 중간에 컴포넌트를 새로 만들고 또 넘겨줄 것이 생기고 그런다... 적어도 큰 틀이라도 수도코드 작성이 필요하다.