0. 동적 라우팅 (Dynamic Route) ▶ path에 유동적인 값 입력 1.Works.jsx import React from 'react'; import { Link } from 'react-router-dom'; const data = [ { id: 1, todo: '리액트배우기', }, { id: 2, todo: '노드 배우기', }, { id: 3, todo: '스프링배우기', }, ]; //console.log(data); function Works() { return ( {data.map((item) => ( {item.id} {item.todo} ))} ); } export default Works; ▶ 를 사용 + {`/(절대경로)works / #{item.id}`} -> 하이퍼링크처..

1. useNavigate (활용도 높은 페이지 전환 hook) ▶ 어떤 버튼 클릭 / 액션이 있을 때 페이지 이동 ( 태그의 href와 유사 역할 ) import React from 'react'; import { useNavigate } from 'react-router-dom'; function Home() { const navigate = useNavigate(); return ( Home { navigate('/works'); }} > works로 이동 ); } export default Home; ▶useNavigate(); 사용해서 버튼 클릭시 navigate('/works') 2. useLocation (hook) import React from 'react'; import { useNav..

0. react-router-dom (패키지) 설치하기 ▶ 터미널 : yarn add react-router-dom 1. 페이지 컴포넌트 작성 (단일페이지 구현 -> 다중 페이지로 구현) ▶ scr > pages 폴더 > 4개의 페이지 구성 2. Router.js 파일 생성 (router 구성하는 설정 코드 작성-> 주입) import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Home from '../pages/Home'; import About from '../pages/About'; import Contact from '../pages/Contact'; import Works from '../pages/Works'; const..

1. Ducks 패턴 개발자들이 협업할 때 각각 구현하여 찾기 어려워서 패턴화하여 Erik Rasmussen이 제안한 Ducks 패턴으로 모듈을 작성하는 것 1) Reducer 함수를 export default 하기 --> App.js에서 import해서 사용할 수 있도록 2) Action creator 함수를 export 하기 3) Action type은 app/reducer/ACTION_TYPE 형태로 작성하기 => 모듈 파일 1개에 Action type / Action creator / Reducer 가 모두 존재하도록 해야함

1.전역 스타일링 (GlobalStyles) ▶ styled-components : 해당 컴포넌트 내에서만 가능! ▶ 프로젝트 전체를 아우르는 스타일 => createGlobalStyle 사용 [위치] GlobalStye.jsx import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; } `; export default GlobalStyle; [위치] App.jsx ▶ 적용하고 싶은 곳 위에 사용하고 하나로 큰 태그로 묶어주기 import GlobalStyle from..

1.Css-in-JS ▶ 자바스크립트로 css코드를 작성하는 방식 2.Styled Components * 패키지 : 리액트는 없지만, 추가로 외부에서 가져와서 사용하는 외부 라이브러리 (3rd party => npm에 모여있음) (1) VS 코드에서 plug-in 설치필요 ( vscode-styled-components ) (2) 터미널에서 (yarn create react-app CRA 실행 후 (3) 터미널에서 yarn add styled-components 실행 (마켓에서 해당 패키지 가져옴)(4) 파일 package.json에서 확인 가능 import './App.css'; import styled from 'styled-components'; function App() { const StBox ..