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는 사라지는 것 이건 컴포넌트가 떠날 때 호출 됨
댓글 영역