kasumil의 코딩 공작소

https://www.framer.com/motion/ Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com 설치방법npm install framer-motion 사용방법그냥 html을 사용하는 방법과 같습니다. motion.(element)로 사용합니다.import { motion } from "framer-motion"export const MyComponent = () => ( )initial - 초기값,animatie - 행동값Transition - 사용시간 해당 내용으로 적용됩니다. 공식문서에도 적혀있듯이 여러 내용이 있지만, 중요한..

진짜 엿같은 라이브러리다. 정적은 쉬우나 동적 할당하기가 너무 어려웠다. 쟁점. 1. initialState 설정하기. 2. validationSchema 설정하기. import React, { useEffect, useState } from "react"; import { Card, CardBody, Col, Container,Form, FormFeedback, FormGroup, Input, Label, Row } from "reactstrap"; import * as Yup from "yup"; import { useFormik } from 'formik'; // redux const components = props => { const dispatch = useDispatch(); const [ ..

import React from 'react'; import Head from 'next/head'; import Nav from './Nav'; import Footer from './Footer'; type Props = { children: any; } function Layouts({children}: Props) { return ( {children} ) } export default Layouts; // 위처럼 구성했었다. 위 처럼 내용을 구성했더니... 클릭 Nav 컴포넌트의 클릭이벤트가 아무것도 작동이 안되는 버그가 있었다. 흠.... 무엇이 문제일까? 하고 Nav바만 엄청 보고 고민하고 그랬는데, 원인은 Head였다. import React from 'react'; import Nav f..