[Udemy] searching xx -1

검색했을 때 해당 단어에 해당되는 사진 나오게 하는 법

version 1

• sementic-ui사용한 레이아웃과 axios를 사용한 fetching data.

• unsplash API 사용

• two of the most commonly used options in react app.
  1.axios : 3rd party pkg && has two arguements
  (address & object that will have a bunch of options that will customize)
  2.fetch : function bulit into modern browsers

• 이런식의 구조
  

---

<App.js>

import React from 'react';
import axios from 'axios';
import SearchBar from './SearchBar';
//installed into our project above import statements for files that i create.so by convention i would want to put the import statement for axios use above the one for searchbar

class App extends React.Component {
  onSearchSubmit(anything) {
   
  axios.get('https://api.unsplash.com/search/photos', {
        params: { query: anything },
        //? 이후에 뜨는 부분은 param으로 넣어줌
        headers: {
          Authorization:
            'Client-ID Rw6et1-um043INr5rEgB3uiIeQHs_6LlF5UMrDcEUws',
        },
      })
      
  }
  render() {
    return (
      <div className="ui container" style={{ marginTop: '10px' }}>
        <SearchBar onSubmit={this.onSearchSubmit} />
      </div>
    );
  }
}
export default App;

<SearchBar.js>

import React, { Component } from 'react';

class SearchBar extends Component {
  //get to call anytime someone the text inside our input
  state = { term: '' };

  onFormSubmit = e => {
    e.preventDefault();

    this.props.onSubmit(this.state.term);
  };
  render() {
    return (
      <div className="ui segment">
        {' '}
        <form onSubmit={this.onFormSubmit} className="ui form">
          <div className="field">
            <label>image search</label>
            {/*below is callback func. 
            and we don't put a set of () at the end of it 
            due to we don't want to call on input change 
            when our component is rendered
           instead we want to call this func at some point in time 
           in the future */}
            <input
              type="text"
              value={this.state.term}
              onChange={e => this.setState({ term: e.target.value })}
            />
          </div>
        </form>
      </div>
    );
  }
}
export default SearchBar;

---

해당

• 검색시, view는 나오지 않지만 cats관련된 데이터들은 가져와짐