개발나라 스용공주

이번 글은 컴포넌트 간 데이터를 전달할 때 사용되는 context에 대한 설명글이다. [ Context란? ]데이터를 부모에서 자식으로만 전달할 수 있는 props를 대체하여 데이터를 전달할 수 있는 것이다.(props에 대한 설명은 블로그 하단 링크 참고) 데이터를 보관하는 객체라고 생각하면 된다. 만약 props로 데이터를 전달한다면 App에서 child2까지 데이터를 전달하기까지 child1을 걸쳐야 데이터가 전달가능하다.하지만 이렇게 걸쳐지는 과정이 많아질 경우 중복되는 데이터가 과하게 발생하거나 이름 수정 시 번거로워지는데 이를 Props Drilling(프롭스 드릴링)이라고 하게된다. 하지만 context를 사용하면 App에서 child2로 바로 데이터 전달이 가능해진다. 아래 이미지와 같이..

이번 글은 상황에 따라 경로가 변경되는 동적경로를 생성하는 내용이다. [ 동적경로 ]=> 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..