dev/react19 react - axios, 환경변수 fetch api는 따로 설치가 필요없지만 axios가 더 사용하기 쉬운 것 같아서 api 연동에 axios를 많이 사용하는 것 같다. 1. axios 설치 npm install axios 2. base url 설정하기 // urls.jsx export const BASE_URL = '...'; // api_config.jsx import axios from 'axios' import { BASE_URL } from '../../utils/urls'; const baseAxios = () => { const instance = axios.create({ baseURL: BASE_URL, }); return instance; } export const myAxios = baseAxios(); 3. bas.. 2023. 7. 29. react - 페이지 이동 - Link, NavLink Link는 페이지 이동을 시켜준다. a태그와 다르게 새로고침 없이 이동시켜준다. NavLink라는 것도 있다. Link와 같은 역할이지만 isActive라는 속성을 통해 현재 페이지 경로가 일치했을 때 스타일 변화를 줄 수 있다. import React from 'react' import { Link, NavLink } from 'react-router-dom' import styles from '../styles/Header.module.css' const activeStyle = { "color": "white", } const inactiveStyle = { "color": "black", } const Header = () => { return ( { return isActive ? activeS.. 2023. 7. 26. react - 페이지 애니메이션 (framer-motion) 1. framer-motion 설치 npm install framer-motion 2. 애니메이션 컴포넌트 생성 props로 children 컴포넌트를 받음. motion.div의 속성을 이용해 애니메이션 설정 import React from 'react' import { motion } from 'framer-motion'; const PageAnimation = ({ children }) => { return ( {children} ) } export default PageAnimation 3. 페이지 감싸주기 import React from 'react'; import { PageAnimation } from '../components/components'; import mainImg from '... 2023. 7. 24. react - 헤더 1. Layout 컴포넌드 생성 import React from 'react' const Layout = () => { return ( Layout ) } export default Layout 2. Header 컴포넌트 생성 import React from 'react' const Header = () => { return ( Header ) } export default Header 3. Layout에 넣어주기 + props 받기 import React from 'react' import Header from './Header'; const Layout = ({ children }) => { return ( {children} ) } export default Layout 4. 페이지 감싸주기 imp.. 2023. 7. 24. react - 페이지 전환 애니메이션 1. framer-motion 설치 npm i framer-motion 2. App.js를 AnimatePresence 으로 감싸기 function App() { return ( } /> );} 3. 컴포넌트 생성inital : 시작 / animate : 등작 / exit : 끝 import React from 'react'import { motion } from 'framer-motion';const PageAnimation = ({ children }) => { return ( {children} )}export default PageAnimation 2023. 7. 22. react - 라우터 1. react-router-dom 설치 npm install react-router-dom 2. App.js 수정 import { Route, Routes } from 'react-router-dom'; import Home from './view/pages/Home'; import './view/styles/App.css'; function App() { return ( ); } export default App; 3. index.js 수정 import React from 'react'; import ReactDOM from 'react-dom/client'; import './view/styles/index.css'; import App from './App'; import reportWebVita.. 2023. 7. 22. 이전 1 2 3 4 다음
