React : Libraries 추천

💡사용해보면서 괜찮았던 라이브러리를 계속 추가하는 포스팅입니다.

라이브러리 쓰면 괜찮을 것 같다!
data바인딩이 끝나고 페이지를 스타일링을 해보기로 했다.
직접 코드로 position을 찍어가면서 애니메이션을 만드는 방법도 있지만, 시간도 오래 걸릴 뿐 더라 그런 능력은 없다! 그러므로 라이브러리를 활용해서 좀더 동적인 효과를 내보는 것이 목표이다.

React bootstrap

✨리액트부트스트랩
emotion, react-spinner도 보았지만 emotion은 아직 이해가 잘 안돼고... react-spinner또한 뭔가 성에 안차던 와중 발견한 react bootstrap.

spinner 말고도 다양한 component를 제공해주기 때문에 잘 사용 할 수 있을 것 같다.
react bootstrap을 사용하기 위해서는 vanilla bootstrap이 설치되어 있어야한다.

npm install react-bootstrap 
npm install bootstrap

스피너부터 버튼, 모달, 테이블까지 다양한 옵션들이 많아서 예쁜 페이지를 쉽게 만들 수 있다.

Framer Motion

✨프래이머 모션
애니매이션 효과를 쉽고 다양하게 구현할 수 있는 라이브러리.
사용법 또한 간단하다.

npm i framer-motion

라이브러리를 인스톨 한 다음에, 필요한 페이지에 임포트 하면 된다.

import { motion } from "framer-motion"

HTML태그 앞에 motion을 붙여서 motion component 하여 사용한다.
초기 상태는 속성initial로, 애니메이션 상태는 속성 animate로 각각 객체형태로 넣어준다.

//예시
<motion.h1
  className="mainTt"
  whileInView={{
    opacity: 1,
    rotate: [0, 360],
    transition: { delay: 0.05 },
  }}
  whileHover={{
    scale: 1.1,
    transition: {
    type: 'spring',
    stiffness: 400,
    damping: 10,
    },
  }}
>
  Hello! this is thetititle's portfolio
  <em>.</em>
</motion.h1>

옵션이 많은 만큼 꼼꼼히 살펴봐야하지만 굉장히 마음에 드는 효과를 얻을 수 있었다.

React Device Detect

✨react-device-detect
리액트에서 사용하는 디바이스 체크 라이브러리.
사용방법도 굉장히 간편하다.

import { MobileView, isMobile } from 'react-device-detect';

모바일인지 체크할 생각이라면 위의 형식대로 임포트하면 된다.
API의 Selectors를 참고하여 다양한 디바이스를 확인할 수 있어서 좋았다.