개발나라 스용공주

이번 글은 컴포넌트 간 데이터를 전달할 때 사용되는 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} );