1. 데이터 세분화 총 네개의 각자 다른 api를 불러와서 하나의 데이터로 합쳤을때 각자 객체의 속성값이 다르게 나와서 이 데이터들을 활용하는 것에 어려움이 있었습니다. 1) 먼저 모든 데이터에는 주소가 존재했기에 주소를 통한 filter처리를 먼저 해주었습니다. 서구,중구 등 셀렉트 요소를 사용하며 셀렉트가 될때 const handleSearchGu = (e) => { console.log(recentItems); const inputText = e.target.value.trim(); // localStorage.setItem("selectedOption", inputText); setChooseGu(locatoinList[inputText]); const filteredData = inputText..
안녕하세요! 리액트에서 이전/다음 버튼을 만드는 Pagination 컴포넌트를 작성해 보았습니다. import React, { useState } from "react"; const Pagination = ({ itemsPerPage, totalItems, onPageChange, currentPage }) => { const pageNumbers = Math.ceil(totalItems / itemsPerPage); const handlePageChange = (pageNumber) => { onPageChange(pageNumber); }; return ( handlePageChange(currentPage - 1)} > 이전 {Array.from({ length: pageNumbers }, (_, ..
React 앱을 생성하고 실행하는 방법은 다음과 같습니다. 먼저 원하는 디렉토리에 앱을 생성할 폴더를 만듭니다. 예를 들어, react-app 폴더를 생성하고 싶다면, 터미널에서 다음과 같은 명령어를 실행합니다. mkdir react-app cd react-app 2. 생성된 폴더에서 npx create-react-app . 명령어를 실행합니다. .은 현재 디렉토리에 앱을 생성하겠다는 의미입니다. npx create-react-app . 3. React 앱이 성공적으로 생성되면, npm start 명령어를 실행하여 앱을 실행합니다. npm start 이 명령어를 실행하면 웹 브라우저에서 http://localhost:3000 주소로 앱이 열리고, React 개발 서버가 자동으로 시작됩니다. 이제 앱을 편..
