FrontEnd/React (2) 썸네일형 리스트형 [React] 검색 기능 구현 구현할 기능은 검색 기능이다. 레이아웃 요청 받은 디자인은 다음과 같다. 처음엔 div안에 돋보기 이미지와 input 태그를 사용하는 방법으로 구현했으나 검색 시 뷰의 전환과 동시에 쿼리를 넘겨야 했기에 form 태그를 이용하는 방법을 택했다. 카멜 케이스로 작성해야하는데 스네이크 케이스가 너무 보기 편하다.. 기능 구현 검색 대상은 게시물의 제목과 내용이다. 쿼리 전달 useState를 이용해 입력된 query를 받아오고 변화를 감지하기 위해 onChange를 사용했다. filter함수를 통해 입력값과 데이터를 소문자로 변환해 전달할 수 있도록 했다. const [query, setQuery] = useState(""); const keys = ["title", "content"]; // 키를 사용해 .. [React] React Router Routing이란? 사용자가 요청한 URL에 맞는 페이지 보여주는 기능 React Router 사용자 입력 주소 감지, 다양한 라우터 컴포넌트 제공 공식 페이지 종류 BrowserRouter HashRouter 설치 npm i react-router-dom yarn add react-router-dom import path 설정, Link 설정 /*BrowserRouter*/ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import {Link} from "react-router-dom" 사용예 - Navbar 구현 App BrowserRouter 사용 위해 태그로 전체 감쌈 Route 다중 사용 위해 Routes 태.. 이전 1 다음
