React Library

React Library

React Router

• React Router는 React 라이브러리로, 라우팅을 구현할 때 사용한다.

- 설치하기

• React Router를 설치할 때는 다음 명령어를 사용한다.

yarn add react-router-dom
npm install react-router-dom

- 사용하기

// index.js
import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
    <App />
</BrowserRouter>;

// App.js
import { Route } from 'react-router-dom';

<Routes>
    <Route path="/" element={<Home />} />;
    <Route path="/about" element={<About />} />;
    <Route path="/profile/:username" element={<Profile />} />;
</Routes>;

// Home.js
import { Link } from 'react-router-dom';

<Link to="/about">소개</Link>;

// Profile.js
import { withRouter } from 'react-router-dom';

const Profile = ({ match, location, history }) => {
    return <div>{match.params.username}</div>;
};

export default withRouter(Profile);

React Helmet

• React Helmet은 React 라이브러리로, HTML의 head 태그를 수정할 때 사용한다.

- 설치하기

yarn add react-helmet-async
npm install react-helmet-async

- 사용하기

// index.js
import { Helmet } from 'react-helmet-async';

<Helmet>
    <title>타이틀</title>
    <meta name="description" content="메타 태그" />
    <link rel="canonical" href="주소" />

    <meta property="og:title" content="타이틀" />
    <meta property="og:description" content="메타 태그" />
    <meta property="og:image" content="이미지 주소" />
    <meta property="og:url" content="주소" />
    <meta property="og:site_name" content="사이트 이름" />
    <meta property="og:locale" content="ko_KR" />

    <meta name="twitter:title" content="타이틀" />
    <meta name="twitter:description" content="메타 태그" />
    <meta name="twitter:image" content="이미지 주소" />
    <meta name="twitter:card" content="summary_large_image" />
</Helmet>;

React Icons

• React Icons는 React 라이브러리로, 아이콘을 사용할 때 사용한다.

- 설치하기

yarn add react-icons
npm install react-icons

- 사용하기

import { FaHome } from 'react-icons/fa';

<FaHome />;

styled-components

• styled-components는 React 라이브러리로, CSS를 사용할 때 사용한다.
• const 이름 = styled.태그명스타일;
• const 이름 = styled(컴포넌트명)스타일;

- 설치하기

yarn add styled-components
npm install styled-components

- 사용하기

import styled from 'styled-components';

const StyledComponent = () => {
    return (
        <Box color="black">
            <Button>안녕하세요</Button>
            <Button inverted={true}>테두리만</Button>
        </Box>
    );
};

// const 이름 = styled.태그명`스타일`;
const Box = styled.div`
    background: ${(props) => props.color || 'blue'};
    padding: 1rem;
    display: flex;
`;

// const 이름 = styled(컴포넌트명)`스타일`;
const ButtonStyle = styled(Button)`
    background: white;
    color: black;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;

    &:hover {
        background: rgba(255, 255, 255, 0.9);
    }

    // props.inverted가 true일 때
    ${(props) =>
        props.inverted &&
        css`
            background: none;
            border: 2px solid white;
            color: white;

            &:hover {
                background: white;
                color: black;
            }
        `}

    & + button {
        margin-left: 1rem;
    }
`;

export default StyledComponent;

Framer Motion

사이트 : https://www.framer.com/motion/
사용법 : https://www.framer.com/docs/
내가 정리한 사용법 : https://oddcode.tistory.com/275

• Framer Motion은 React 라이브러리로, 애니메이션을 구현할 때 사용한다.
• Framer Motion은 React의 컴포넌트를 사용하여 애니메이션을 구현한다.
• Framer Motion은 애니메이션을 구현할 때 CSS를 사용하지 않고, JavaScript를 사용한다.

- 설치하기

yarn add framer-motion
npm install framer-motion

- 사용하기

import { motion } from 'framer-motion';

const Motion = () => {
    return (
        <motion.div animate={{ x: 100 }} />
        <motion.div animate={{ scale: 2 }} />
        <motion.div animate={{ rotate: 360 }} />
        <motion.div animate={{ opacity: 0 }} />
        <motion.div animate={{ backgroundColor: 'blue' }} />
        <motion.div animate={{ borderRadius: '50%' }} />
        <motion.div
            animate={{ x: 100, y: 100, s  cale: 2, rotate: 360, opacity: 0, backgroundColor: 'blue', borderRadius: '50%' }}
        />
    );
};