개발나라 스용공주

이번 글은 데이터를 정렬하여 새로운 배열을 반환해주는 toSorted()에 대한 글이다. [ toSorted() ]toSorted()는 원본 데이터를 변형하지 않고 데이터를 정렬하고 정렬된 새로운 배열로 반환해준다. [ toSorted() 활용 예제 ]toSorted()를 활용하여 게시판의 글 정렬 순서를 최신순과 오래된 순으로 변경하는 예제이다. 정렬순서 상태를 담을 변수는 동적인 데이터를 담기 때문에 아래 코드와 같이 스테이트를 생성해준다.의 값이 변경될 때마다 sortType의 값이 변경된다.보통 최신순으로 게시글을 정렬하므로 이때의 초기값 또한 latest(최신순)으로 정렬해준다.const [sortType, setSortType] = useState("latest"); 이벤트 핸들러를 활용..

이번 글은 템플릿 리터럴을 활용해 동적으로 변화하는 값을 담는 활용법에 대한 글이다. [ 템플릿 리터럴 사용법 ]현재 날짜를 표시해주는 기능에 대한 예제다. 먼저 아래 코드와 같이 현재 날짜를 담아줄 state를 생성해준다.const [date, setDate] = useState(new Date()); 아래와 같이 백틱(`)으로 감싸준 뒤 $ 뒤에 날짜 데이터를 담은 스테이트를 가져와 연도와 월을 가져와 출력한다.이때 월은 +1을 해줘야 정상적으로 현재의 달이 출력되기 때문에 반드시 +1을 해줘야한다. {`${date.getFullYear()}년 ${date.getMonth() + 1}월`}

이번 글은 컴포넌트 간 데이터를 전달할 때 사용되는 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는 상태변화를 요청..