2019. 06. 12 - 2019. 06. 15 이머시브 수업 3주차 - 3일 ~ 6일(react, recast.ly, YouTube API - fetch사용해서 가져오기)

React 

JSX(javascript + XML)

render(){
  return (
  	   <div>
 	   	hello world !
	   <div>
  )
}

이런식으로 html 태그인 div안에 감싸서 쓰는 문법을 JSX라고 한다

 

Virtual Dom

이라는애가있고 얘가 필요한 부분만 업데이트해주기때문에 DOM을 직접적으로 건드리면 안된다 !

 

Lift Cycle

컴포넌트가 렌더링이 되기전부터 렌더링이 끝날때까지의 생명주기가 있고 그 생명주기들을 세분화 시킨 메소드를 쓸수있다

componentDidMount, componentDidUpdate 등등....

렌더링 순서가 어떤식으로 진행되는지 아는것이 정말 중요 

 

class 에서만 life cycle을 쓸수있는데

그 이유는 React.component 에서 상속을 받기때문

 

Lifting state up

부모가 자식에게

props를 event콜백함수로 넘겨주면

자식이 부모의 component를 변화시킬 수 있다 

 

Debounce

https://hyunseob.github.io/2018/06/24/debounce-react-synthetic-event/

이번에 sprint를 진행하면서 onchange를 쓸 일이 있었는데 일정시간동안 반복 입력된 경우 호출하지 않고

한번만 호출하도록 도와주는애다

api 호출하는 경우 키를 칠때마다 계속 렌더가 일어날텐데 이를 크게 줄여주므로 서버측에도 성능향상이 높다 할수있다 

주의 : 

Setstate 가 일어나면 render가 된다

그러므로 render 안에 setstate가 있으면

무한루프를 돌기때문에( Setstate로 인해 변경이 끝나기도 전에 또 render가 돌기때문 )

Stack overflow error가 난다

 

 

Youtube API

https://developers.google.com/youtube/v3/getting-started?hl=ko

YouTube API를 이용해 YouTube 동영상에 액세스하려면 개발자 키가 있어야합니다. 3rd party API를 사용하는 것은 데이터에 액세스하는 사용자를 추적하거나, 속도 제한을 적용하고, 때로는 수익을 창출하기를 원하기 때문에 이는 서비스 제공에서 아주 일반적인 관행입니다. YouTube API에 대한 액세스는 무료이며 필요한 것은 Google 계정뿐입니다. 다음 동영상을 참조하여, YouTube API Key를 어떻게 얻을 수 있는지 확인해보세요.

 

• Go to Google's YouTube API
• If prompted, select a project or create a new one. It doesn't matter what you name a new project
• Click Enable and then Go to Credentials
• Select Web browser from the drop-down and the Public data radio button
• Give your key any name, leave the optional field blank, and click Create
• Make your key available to the rest of your application from a new file, config/youtube.js

YouTube 동영상을 검색하려면 API의 Search:list 엔드포인트를 사용합니다. 보다 체계적으로 코드를 관리하려면, 엔드포인트와 상호작용하는 헬퍼 함수를 작성하는것이 좋습니다. src/searchYouTube.js에 있는 searchYouTube 함수를 작성하세요:

• XHR, fetch, jQuery 무엇이든 좋습니다. Search:list 엔드포인트에 GET 요청을 보내십시오.
• callback 함수를 파라미터로 받아야 합니다. 엔드포인트에 호출 후 실행하는 함수입니다. 이때 콜백의 인자(argument)는 비디오 배열로 넘겨주십시오.
• 옵션을 담는 객체를 파라미터로 받아야 합니다. 여기서는 Destructuring assignment를 이용합니다.
  • query: 검색어, 즉 API 문서의 q 매개변수에 해당됩니다
  • max: 가져올 동영상의 최대 개수이며, 기본값은 5입니다. API 문서에서 maxResults 매개변수에 해당됩니다.
  • key: 인증된 YouTube API키 입니다. API 요청은 key 매개변수를 항상 포함해야 합니다.
• API 호출 시, 다음 매개변수를 반드시 넘겨주어야 합니다.
  • part의 값은 snippet으로 지정하십시오.
    • type의 값은 video으로 지정하십시오.

     

이런식으로 설정해서 api를 긁어다가 쓸 수 있음 

---

https://reactjs.org/docs/forms.html : 리액트 공식문서(영어)

https://www.gaesignerblog.com/post/24 : 리액트 공식문서 한글버전