dev/react (18) 썸네일형 리스트형 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.. 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.. 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 '... 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.. 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.. 동적 라우팅 페이지를 이동할 때 리스트 중 하나를 클릭했을 때 상세페이지로 들어가는 등 이러한 기능을 위해서 해당 리스트의 id로 데이터를 조회해 페이지를 띄어줘야할 때가 있다. 이 때 id는 동적인 값이므로 라우트에 동적id 값이 들어간다. 이를 위해 path 부분에 : 를 붙히고 변수이름을 붙히면 동적 변수가 경로에 들어갈 수 있다. 포스트 리스트 중 클릭한 포스트의 id를 이용해 페이지를 이동시켜주기 위해 /:id로 경로를 만들어 상세보기 페이지를 추가해주었다. loader속성으로 해당 페이지가 로드될 때 id값으로 백엔드에서 데이터를 조회한다. const router = createBrowserRouter([ { path: '/', element: , children: [ { path: '/', element.. Form, action 기존의 form태그를 이용해 포스트를 등록했던 것을 리액트의 Form컴포넌트로 변경할 수 있다. 라우트들을 정의해놓은 Main.jsx에서 action이라는 속성을 추가해준다. action에는 해당 컴포넌트에서 Form을 통해 요청을 했을 때 실행할 함수가 들어간다. // Main.jsx import React from 'react' import ReactDOM from 'react-dom/client' import { RouterProvider, createBrowserRouter } from 'react-router-dom' import './index.css' import Posts, { loader as postsLoader } from './routes/Posts' import RootLayout.. loader, useLoaderData 해당 경로의 페이지에 진입할 때 HTTP요청으로 데이터를 받아오거나 페이지 로드 시 필요한 작업들이 있을 것이다. useEffect()를 사용해서 이러한 일들을 처리할 수도 있지많 라우트를 정의하는 곳에서 loader 속성을 사용하여 처리할 수 도 있다. (react-router-dom 패키지가 6.4.0 이상일 때 사용가능 하다.) 해당 컴포넌트 내에서 함수 하나를 만들어 export해주고 loader 부분에 넣어준다. // Main.jsx const router = createBrowserRouter([ { path: '/', element: , children: [ { path: '/', element: , loader: postsLoader, children: [ { path: '/new', el.. 이전 1 2 3 다음
