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%' }}
/>
);
};
'Front > React' 카테고리의 다른 글
API 통신 - react 배우기 (0) | 2023.11.16 |
---|---|
React GitHub 배포, Netlify 배포 (0) | 2023.11.13 |
Framer Motion - 리액트 라이브러리, 애니메이션 구현 (0) | 2023.11.04 |
상태(State) - React 배우기 (0) | 2023.10.31 |
이벤트(Event) - React 배우기 (0) | 2023.10.31 |