노마드코더 강의_React #2

import React from "react";

import PropTypes from "prop-types";



function Food({ name, picture, rating }) {

  return (

    <div>

      <h2>i like {name}</h2>

      <h4>{rating}/5.0</h4>

      <img src={picture} alt={name}></img>

    </div>

  );

}



const foodILike = [

  {

    id: 1,

    name: "kimchi",

    rating: 5,

    image: "https://djlib.sen.go.kr/djlib/index.do",

  },

  {

    id: 2,

    rating: 4.9,

    name: "samgyup",

    image: "https://djlib.sen.go.kr/djlib/index.do",

  },

];



Food.propTypes = {

  name: PropTypes.string.isRequired,

  picture: PropTypes.string.isRequired,

  rating: PropTypes.number

};



function App() {

  return (

    <div>

      {foodILike.map(dish => (

        <Food

          key={dish.id}

          name={dish.name}

          picture={dish.image}

          rating={dish.rating}

        />

      ))}

    </div>

  );

}

export default App;



import React from "react";

import PropTypes from "prop-types";



class App extends React.Component {

  constructor(props) {

    super(props);

    console.log("hello");

  }



  state = {

    count: 0,

  };

  add = () => {

    this.setState(current => ({ count: current.count + 1 }));

    // this.setState({ count: this.state.count + 1 });

  };

  minus = () => {

    this.setState(current => ({ count: current.count - 1 }));



    // this.setState({ count: this.state.count - 1 });

  };

  // render에 state를 넣으려면 {this.state.count} 이렇게 넣어야 함

  // setState를 사용하지 않으면(만약 this.state로 하면) 새 state와 함께 render function이 호출되지 않음



  componentDidMount() {

    console.log("component rendered");

  }



  componentDidUpdate() {

    console.log("i just updating");

  }

  //버튼 누를때마다 랜더 다시 하고 그담에 이거 실행한다



  componentWillUnmount() {

    console.log("unmounted");

  }

  render() {

    console.log("i am rendering");

    return (

      <div>

        <h1>the number is {this.state.count}</h1>

        <button onClick={this.add}>add</button>

        {/* 여기서 onClick은 리액트에서 제공하는 자동으로 불러올 */}

        {/* 즉, onEvent 뭐시기 안해도 됨 */}

        <button onClick={this.minus}>minus</button>

      </div>

    );

  }

}



//class 컴포넌트는 return을 가져오지 않음

//함수컴포넌트는 뭔가를 리턴새서 스크린에 표시,

//클래스컴포는 리액트컴포넌트로부터 확장하고 스크린에 표시(render method를 실행해야만..)

//그리고 클래스는 state가 가능!!

export default App;



// mount는 일어나는거 >> constructor() 자바스크립트에서 온 건데 가장 먼저 호출됨

// > 그담에 render() > 그담에 componentDidMount

// 그담에 업데이트(스테이트땜에 바뀌는 것)  다시 render() >> 마지막으로 componentDidUpdate()



// 마지막으로 componentWillUnmout() >> unmount는 사라지는 것 이건 컴포넌트가 떠날 때 호출 됨