[React] 컴포넌트 분리 및 searchbar

영상 앱을 다음과 같이 컴포넌트를 분리했다.

그에 맞게 파일을 만들었고

search_bar에는 다음과 같이 input태그를 입력해주었다.

이때 

React를 사용하지않아도 라이브러리 추가를 해줘야하는 이유는

JSX문법을 바벨과 웹팩이 번역해도 일단 저거를 이해 유지보수하기 위해서는 react가 필요하기 때문

export defalut를 굳이 해주는 이유는 필요한 것들만 골라서 export하고 싶어서라고 한다.

그리고

import React from 'react';

import ReactDOM from 'react-dom';

import SearchBar from './component/search_bar';

const App =() => {

return (

<div>

<SearchBar />

</div>

);

}

ReactDOM.render(<App />, document.querySelector('.container'));

다음과 같이 index.js에 Searchbar를 import한다