팀프로젝트_기록일지/React복습용글3 감정일기장_복습노트_1 : useParams() , useSearchParams(), 공통 컴포넌트 Header 1_ useParams() 사용하기 : 주로 동적경로 페이지 다룰 떄, 사용import { useParams } from "react-router-dom";function Component(){ const {id} = useParams(); return ({`Component_${id}의 페이지`})}2_ useSearchParams() 사용하기 : 주로 주소 링크 맨마지막 queryString 추출 시, 사용http://localhost:5173/diary/2?value=3import { useSearchParams } from "react-router-dom";function Component(){ const [params, setParams] = useSearchParams(); .. 2025. 1. 21. TodoList_복습1 ● List.js : 검색창에 입력값에 따라 바로 렌더링import { useState } from "react";import "./List.css";import TodoItem from "./TodoItem";function List({ items, onUpdateItem, onDeleteItem }) { const [search, setSearch] = useState(""); const onChangeSearch = (event) => { setSearch(event.target.value); }; const onKeyDownSearch = (event) => { if (event.keyCode === 13) { // 검색어가 없으면 필터링하지 않고 반환 if (.. 2025. 1. 18. (1)React_배열Render, sort,delete ● 복습1_fetch + 배열 render하기○ App.jsimport { useState } from "react";import ReviewList from "./ReviewList";import { getReviews } from "../api";function App() { const [items, setItems] = useState([]); const handleLoadClick = async () => { const { reviews } = await getReviews(); setItems(reviews); }; return ( 불러오기 );}export default App;○ ReviewList.jsimport "./ReviewList.. 2025. 1. 2. 이전 1 다음
