Dev/React

[React] npm packages for React

surimi🍥 2021. 8. 2. 23:52
반응형

# 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