TIL 22.08.17 | enum, useMatch, Framer-Motion

HyeonWooGa·2022년 8월 17일
0

TIL

목록 보기
17/39
  1. enum (TypeScript)
    • 자료 열거형 변수(타입?)
    • 유용하게 쓸 수도 있지만 여러 이유때문에 쓰지 말라고 하는 사람도 많습니다.

  2. left: 0; right: 0; margin: 0 auto; (CSS)
    • 뭔가를 가운데 정렬하고 싶을떄 꿀팁

  3. useMatch(string | pathPattern) (react-router-dom)
    • 현재 페이지가 해당 라우트에 있는지 확인할 수 있습니다.
    • 예시
       // url "/" 인 경우, url 정보 반환
       // 아닌 경우 null 반환
       
       const homeMatch = useMatch("/");
       
       // url "/tv" 인 경우, url 정보 반환
       // 아닌 경우 null 반환
       
       const tvMatch = useMatch("/tv");

  4. layoutId=string (Framer-Motion)
    • 두 개 이상의 요소에 동일한 layoutId 프로퍼티를 주면 해당 요소들의 스타일 변화가 있을때 애니메이션으로 연결해줍니다.
    • 해당 요소들은 motion.태그 형태로 변경해줘야합니다.

  5. transform-origin (Framer-Motion)
    • 변화가 시작되는 위치를 위미합니다.

  6. scaleX (Framer-Motion)
    • X 축 크기를 조절할 수 있습니다.

  7. inputAnimation (Framer-Motion)
    • 조건에 따라 애니메이션 시작점을 지정할 수 있습니다.
    • useAnimation 적용 안할시 인풋 태그 이유없이 보였다 사라지는 문제 해결 가능합니다.
profile
Aim for the TOP, Developer

0개의 댓글