개발나라 스용공주

이번 글은 상황에 따라 경로가 변경되는 동적경로를 생성하는 내용이다. [ 동적경로 ]=> URL Parameter : 아이템의 id 같이 변경되지 않는 값을 주소로 명시하기 위해 사용=> Query String : 검색어 등의 자주 변경되는 값을 주소로 명시하기 위해 사용 [ URL Parameter ]아래 코드와 같이 /:id를 작성해주면 URL Parameter가 되어 diary의 뒤에 아이디가 오면 해당 페이지의 동적 경로로 판단됨} /> useParams를 통해 현재 브라우저에 명시한 URL 파라미터의 값을 가져올 수 있게 됨import { useParams } from "react-router-dom"; useParams()을 통해 현재 들어온 id의 값을 변수에 저장하고 해당 변수의 id를..

이번 글은 페이지 이동 방식에 대한 글이다. [ 1. 링크로 이동 ]=> 링크가 필요할 때 사용 1) Link를 임포트해준다import { Routes, Route, Link } from "react-router-dom"; 2) Link의 to로 연결해줄 링크와 연결시켜준다. Home New Diaryimport "./App.css";import { Routes, Route, Link } from "react-router-dom";import Diary from "./pages/Diary";import Home from "./pages/Home";import New from "./pages/New";import Notfound from "./pages/NotFound";function App() ..

import { Routes, Route } from 'react-router-dom'// /입력 시 Home, /new new, /diary diary 각각의 페이지를 가져오도록 하기 위함 Routes와 Route를 사용하면 원하는 경로로 원하는 컴포넌트를 연결해줄 수 있다.return ( }/> }/> }/> // path는 경로 element는 해당 경로에서 렌더링할 컴포넌트 작성 // Routes는 위에서부터 순서대로 순회 // ex. /new라는 path를 찾았다면 해당 컴포넌트에 해당하는 페이지를 렌더링 // path가 *일 경우 위의 조건들이 모두 없을 경우 띄우는 페이지 (default) )}import "./Ap..

이번 글은 이벤트를 활용하여 어떤 키보드 버튼이 눌렸는지 인식하는 법에 대한 글이다. [ 활용 실습 ]keyCode에서 13번은 enter버튼을 의미한다.아래 코드는 만약 이벤트가 enter 버튼이 눌렸을 경우 onClickAdd()를 실행한다는 의미가 된다.const onKeyDown=(e)=>{ if(e.keyCode===13){ onClickAdd(); } } => input에 키가 눌렸을 때 onKeyDown이 실행되고 이때 enter가 눌렸다면 키 코드가 13번이 맞으므로 함수 내부가 실행됨return ( onKeyDown={onKeyDown} );

이번 글은 state를 생성하는 리액트 훅인 useReducer에 대한 글이다. [ useReducer ]useReducer : 컴포넌트 내부에 새로운 state를 생성하는 react hook=> 모든 useState는 useReducer로 대체가 가능하다차이점 : 상태관리코드를 컴포넌트 외부로 분리할 수 있다. (외부에 분리할 수 있는 것이 useReducer / 내부에서만 사용할 수 있는 것이 useState) [ useReducer 사용법 ]state를 사용할 때처럼 아래 코드를 import해줘야한다.import { useReducer } from "react"; 아래 코드와 같이 useReducer()를 선언해준다.[ useReducer() 내부 구조 ]이때 dispatch는 상태변화를 요청..

이번 글은 동적경로의 종류와 사용법에 대한 글이다.이번 글의 예제와 연계된 실습 내용을 담은 글은 이번 글 맨 아래에 링크가 첨부되어있다. [ 동적 경로(Dynamic Segments) ]동적인 데이터를 포함하고 있는 경로로 페이지 링크가 아래 예시와 같이 변하면서 다른 페이지를 렌더링할 때 이를 동적경로라고 부른다.  [ 동적 경로의 종류 ]ex. '~/product/1' (1번 상품 페이지) , '~/product/2' (2번 상품 페이지)=> 이때 맨 뒤에 오는 숫자에 따라 렌더링하는 상품이 변경됨=> 1. URL Parameter : 위의 예시 방식으로 /(슬래쉬) 뒤에 아이템의 id를 명시(잘 변경되지 않는 아이템의 id 등의 값의 주소를 명시할 때 사용됨)  2. Query String : U..

이번 글은 페이지를 이동시키는 함수를 반환해주는 useNavigate()의 사용법에 대한 글이다. 이 블로그 포스팅과 연결되는 내용이다.https://hwangseoyoung.tistory.com/214 BrowserRouter : 브라우저의 현재 주소를 저장하고 감지하" data-og-host="hwangseoyoung.tistory.com" data-og-source-url="https://hwangseoyoung.tistory.com/214" data-og-url="https://hwangseoyoung.tistory.com/214" data-og-image="https://scrap.kakaocdn.net/dn/bJ1SH2/hyYCd7JCJa/BPZSbYCgSiZJ6zIEcX3oC1/img.png..

이번 글은 페이지를 이동시켜주는 라우트(Route)를 어떻게 사용하는지에 대한 글이다.  먼저 아래 코드와 같이 설정을 해준다. [ main.jsx ]=> BrowserRouter : 브라우저의 현재 주소를 저장하고 감지하는 역할import { BrowserRouter } from "react-router-dom"; App 컴포넌트를 감싸줌createRoot(document.getElementById("root")).render( ); BrowserRouter가 전체를 감싸고있음 [ Routes 컴포넌트 ]Routes 컴포넌트는 페이지를 이동할 때 사용하는 컴포넌트이다. ※ 이때 Routes 컴포넌트는 주의사항 2가지가 있다.첫번째는 안에는 만 들어가야 오류가 발생하지 않는다.그리고 두번째는..