[TIL] React LifeCycle

miniyoung37ยท2019๋…„ 10์›” 3์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
9/46

๐Ÿ‘‰ 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;

์ฐธ๊ณ  ๋ฌธ์„œ : React ๊ณต์‹ ๋ฌธ์„œ

profile
TIL record

2๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2019๋…„ 10์›” 4์ผ

react ์ƒ๋ช…์ฃผ๊ธฐ๋Š” ํ˜„์ €๋ฒ„์ „์—์„œ๋Š” ๋‹ค๋ฆ…๋‹ˆ๋‹ค.
https://ko.reactjs.org/docs/react-component.html ๊ณต์‹๋ฌธ์„œ
https://www.w3schools.com/react/react_lifecycle.asp ๋ฅผ ๋ณด๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค ใ…Žใ…Ž

1๊ฐœ์˜ ๋‹ต๊ธ€