2019-05-29 React(2)

  • 리액트는 많은 컴포넌트로 구성이 되어있다.
  • 컴포넌트는 함수나 오브젝트의 형태로 HTML을 반환한다.
  • 어플리케이션을 만들기위해 어떻게 컴포넌트를 나눌지 기준을 정해야한다. 하지만 정해진 기준은 없다.

  • 위의 그림과 같이 각 기능에 대한 부분을 여러개의 컴포넌트들로 분리를 할 수 있다.
  • 총5개의 컴포넌트로 분리할 수 있다. 4개는 각 기능에 대한 컴포넌트(비디오, 검색, 추천영상관리, 하나의 추천영상) 나머지 4개를 전체 가지고 있는 컴포넌트로 구성이된다.
  • index는 모든파일들의 루트이다.

규칙1. 파일 하나당 하나의 컴포넌트를 만들어야한다.

  • src디렉토리에 index.js라는 파일을 만든다.
  • components라는 하위 디렉토리를 만든다.
  • components에 search_bar, video_list, video_detail, video_list_item이라는 파일을 생성.
  • 위의 기준으로 컴포넌트를 나눈것은 임의적이다.
  1. youtube data v3 apikey받기
  2. 검색요청패키지설치(youtubeapisearch npm package) : 검색어와 api키를 주면 검색어에 맞는 비디오 데이터 리스트를 준다. => npm install –save youtube-api=search를 통해 npm패키지설치. –save옵션을 통해 package.json에 자동으로 디펜던시 추가가된다.
//search_bar.js
import React from 'react';

const SearchBar = () => {
    return <input /> // React.createElement
};


export default SearchBar;

//index.js

import SearchBar from 'search_bar'
  • 컴포넌트에 값이 없기때문에 <input></input>으로 안해도 된다.
  • 랜더링을 할때, search_bar를 참고할 수 있게 해야한다.
  • 어떤 파일에서도 SearchBar컴포넌트를 import할 수 있다.
  • search_bar컴포넌트로 불러오면 좋다. 바벨이 components 디렉토리에 있는 search_bar.js를 찾아, 검색바 모듈을 가져오는 걸 기대하지만 아니다…. 우리가 가리키는 실제 주소를 가르쳐줘야한다. 라이브러리를 불러오는게 아니기때문에…
  • import React from ‘react’는 node_modules폴더에서 react라는 라이브러리를 가져오라는 명령.
  • but. 실제 파일이 위치를 가리켜야한다.( import SearchBar from ‘./components/search_bar’;) .js를 안붙여도 된다.
  • 결론 : 우리가 직접 만든 파일이 있으면, 파일참조나 폴더 혹은 주소참조를 제공해야한다. npm으로 제공된 라이브러리라면 패키지의 이름만 적으면된다!!!
//index.js
import React from 'react';
import ReactDOM from 'react-dom';

import SearchBar from './components/search_bar'
const API_KEY = 'AIzaSyCJIzs3c-TGNkDjybqXqmR5EEEr3d-ILH0'
const App =  () => {
    return <div>
        <SearchBar/>
    </div>
}
ReactDOM.render(<App/>, document.querySelector('.container'));
  • search_bar.js에서 SearchBar라는 컴포넌트를 선언, export를 통해 내보낸다.
  • index.js에서 가져오고, App컴포넌트안에서 렌더링한다.
  • App컴포넌트는 div에서 렌더링을 한다.
  • div는 index.js파일의 container라는 컨테이너에 있다.

#### 클래스 컴포넌트

  • 리액트에서는 함수형 컴포넌트와 클래스컴포넌트가 있다. 클래스컴포넌트는 내부적인 정보를 저장할때 사용.
// convert functional component to class component

//before

const SearchBar = () => {
    return <input /> // React.createElement
};

//after
class SearchBar extends React.Component {
    render() {
        return <input />;
    }
}

// refactoring
import React, { Component } from 'react';

class SearchBar extends Component {
    render() {
        return <input />;
    }
}
export default SearchBar;
  • SearchBar라는 클래스를 정의하고 React.Component로부터 모든 기능을 제공받는다.
  • 메소드 기반의 클래스를 사용하고, 그자체로 렌더링을 할 수 있는건 아니다 !!! 렌더링을 할 수 있는 메소드? 능력이 필요하다. JSX변환이 필요!! render라는 메소드를 정의해서 해결을 한다.
  • 우리가 생성한 모든 리액트 컴포넌트, 클래스 기반 컴포넌트는 render메소드로 정의되어져야 한다.
  • App컴포넌트가 검색바를 렌더링할 때마다 이전의 일반함수를 호출하는 대신 render함수를 호출한다.
  • render함수를 정의할 때마다 JSX를 반환해야한다.
  • 리팩토링한것을 문법적설탕(Syntactic sugar)라고 한다. const Component = React.Component와 같은 의미이다. 하지만 중괄호({)를 통해 { Component } react 라이브러리를 불러와 Compnent라 부르는 변수를 프로퍼티 형태로 가져오라는 의미.
  • 리액트에서 이벤트를 헨들링할때 2가지 과정이 이루어진다. 첫째, 이벤트핸들러를 선언한다. 둘째, 이벤트 핸들러를 살펴보려는 요소에 전달한다.
  • 검색바에서는 텍스트가 바뀌는것을 알려고 한다. 먼제 이벤트가 발생할 때마다 실행되는 함수를 알아야한다.
import React, { Component } from 'react';

class SearchBar extends Component {
    render() {
        return <input onChange={this.onInputChnage} />;
    }

    onInputChnage() {

    }
}
export default SearchBar;
Written on May 29, 2019