React의 Life Cycle

형제 컴포넌트로부터 정보 받는 법

결국에 부모에서 정보를 관리해서 전달해주어야 한다.
부모에서 온클릭 함수를 만들어서 자식 프롭스에 아예 함수로 넘겨준다.
->진짜 실행되는 함수는 부모에 있으니 인자를 넣어서 전달하면 된다.

쿼리 파라메터

Routes.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Main from "./Main";
import Monsters from "./1-monsters";
import ActiveTab from "./2-active-tab";
import LiftingStateUp from "./3-lifting-state-up";
import UrlParameters from "./4-url-parameters";

export default class Routes extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Main} />
          <Route exact path="/monsters" component={Monsters} />
          <Route exact path="/active-tab" component={ActiveTab} />
          <Route exact path="/lifting-state-up" component={LiftingStateUp} />
          <Route exact path="/url-parameters/:id" component={UrlParameters} />
          {/* id 는 키값 */}
        </Switch>
      </Router>
    );
  }
}

index.js

import React, { Component } from "react";
import Card from "../1-monsters/components/Card/Card";
import "./index.scss";

class index extends Component {
  state = {
    user: {},
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then((res) => res.json())
      .then((res) => this.setState({ user: res }));
  }

  componentDidUpdate(PrevProps) {
    if (PrevProps.match.params.id !== this.props.match.params.id) {
      fetch(
        `https://jsonplaceholder.typicode.com/users/${this.props.match.params.id}`
      )
        .then((res) => res.json())
        .then((res) => this.setState({ user: res }));
    }
  }
  //전의 props와 현재 props를 비교를 해서 (비교문 잘 써야함)
  //같으면 fetch를 하지 말고 다를 경우만 새로 fetch를 하게 해야 곗속해서 fetch를 하지 않으므로 리소스의 낭비가 없다.

  render() {
    console.log(this.props);
    const { id, name, email } = this.state.user;
    return (
      <div className="url-parameters">
        <Card id={id} name={name} email={email} />
        <div className="btn-wrapper">
          <button onClick={() => this.props.history.push("/url-parameters/5")}>
            Previous
          </button>
          <button onClick={() => this.props.history.push("/url-parameters/10")}>
            Next
          </button>
        </div>
      </div>
    );
  }
}

export default index;