반응형
# prop-types
https://www.npmjs.com/package/prop-types
npm i prop-types
Component에 사용되는 properties의 속성을 지정해 준다.
import PropTypes from 'prop-types';
function Potato({ name, rating, img }) {
return (
<div>
<h4>{name}</h4>
<span>{rating}</span>
<p><img src={img} alt={name} width='200px' /></p>
</div>);
}
Potato.propTypes = {
name: PropTypes.string.isRequired, // string, 값이 반드시 존재
img: PropTypes.string,
rating: PropTypes.number,
}
Potato의 파라미터로 들어오는 properties이 위 조건에 맞지 않으면 Warning을 발생시킨다.
# axios
fetch()와 같음.
API 받아오는 역할
npm i axios --save
axios.get("url")로 데이터를 받아오는 동안 async - await를 걸어준다.
getMovies = async () => {
// axios로 API를 받아오는데 시간이 걸리므로
// 함수에 async를 걸어 await가 걸린 코드의 동작을 기다리게 한다.
// JS는 비동기인데 await가 걸린 코드의 실행이 끝날 때까지 동기방식으로 바꿔준다.
const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json")
}
반응형
'Dev > React' 카테고리의 다른 글
React Component가 리렌더링 되는 이유 (0) | 2024.12.18 |
---|---|
[React] 강의 메모 (0) | 2021.08.02 |