๐Ÿ‘‰ url & API

  • youtube search url
let url = "https://www.googleapis.com/youtube/v3/search?";
  let obj = {
    q: query,                
    maxmaxResults: max,
    key: key,
    part: "snippet",
    type: "video"
  };

  for (let key in obj) {
    url += key + "=" + obj[key] + "&";
  }
// search? ๋’ค ์ฃผ์†Œ๋Š” ( key=obj[key]& ) ์ด๋ ‡๊ฒŒ ์ž‘์„ฑ

๐Ÿ‘‰ fetch

๋น„๋™๊ธฐ์  ์ผ์„ ํ•  ๊ฒฝ์šฐ componentdidMount์—์„œ ์‹คํ–‰

ComponentDidMount

componentDidMount() {
  // ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—ฐ๋™: D3, masonry, etc
  // ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ์š”์ฒญ: Ajax, GraphQL, etc
  // DOM ์— ๊ด€๋ จ๋œ ์ž‘์—…: ์Šคํฌ๋กค ์„ค์ •, ํฌ๊ธฐ ์ฝ์–ด์˜ค๊ธฐ ๋“ฑ
}

๐Ÿ‘‰ lifeCycle ์‹คํ–‰ ์ˆœ์„œ

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  }

  constructor(props) {
    super(props);
    console.log('constructor');
  }

  componentWillMount() {
    console.log('componentWillMount (deprecated)');
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 5 ์˜ ๋ฐฐ์ˆ˜๋ผ๋ฉด ๋ฆฌ๋ Œ๋”๋ง ํ•˜์ง€ ์•Š์Œ
    console.log('shouldComponentUpdate');
    if (nextState.number % 5 === 0) return false;
    return true;
  }

  componentWillUpdate(nextProps, nextState) {
    console.log('componentWillUpdate');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate');
  }


  handleIncrease = () => {
    const { number } = this.state;
    this.setState({
      number: number + 1
    });
  }

  handleDecrease = () => {
    this.setState(
      ({ number }) => ({
        number: number - 1
      })
    );
  }

  render() {
    console.log('render');
    return (
      <div>
        <h1>์นด์šดํ„ฐ</h1>
        <div>๊ฐ’: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

image.png

<์ด๋ฏธ์ง€ ์ถœ์ฒ˜ https://velopert.com/3631 >