072DATA

안녕 개인 프로젝트 진행중 쿼리 스트링으로 URL에서 id 값을 가져와서 값에 해당하는 상세 페이지를렌더링하도록 코드를 짰는데 어째서인지 상세 페이지가 보이지 않는 것이다.. const searchParams = new URLSearchParams(location.search);//////////////////범인 검거/////////////const pokemonId = searchParams.get("id");////////////////////////////////////////console.log(typeof pokemonId);  콘솔 창에도 아무런 정보가 나오질 않아서 혹시나 하고 id 값에 타입을 확인해 보았더니String이 나오는 것이었다.. !  const searchParams = n..

오류 내용 선택한 포켓몬이 selectedPokemon에 추가는 되는데 렌더링이 안됨 알고보니 map 메서드 안에서 {} 중괄호를 사용하면, 코드 블록은 실행되지만아무것도 반환하지 않기 때문에 실제로 렌더링할 JSX가 없음map 메서드는 배열의 각 요소에 대해 함수를 실행하고그 함수가 반환한 값을 새로운 배열에 담아 반환함코드 확인 ㄱㄱ올바른 코드 selectedPokemon.map((pokemon, index) => { if (pokemon) { return ( ); } else { return ( ); }});  이렇게 하면 return 값인 jsx가 정상적으로 반환되지만  잘못된 코드 selectedPokemon.map((po..

오늘은 개인과제로 포켓몬 도감을 만들기 시작했습니다홈 화면, 포켓몬 목록을 보여주는 도감 화면까지 스타일드 컴포넌트와React Router Dom 으로 UI 및 페이지 이동을 구현했습니다. App.jsximport React from "react";import Home from "./pages/Home";import Dex from "./pages/Dex";import { BrowserRouter, Routes, Route } from "react-router-dom";import PkmDetail from "./pages/PkmDetail";import "./App.css";const App = () => { return ( } /> }..

React로 개발하면서 여러 페이지를 구현해야 할 때 매우 유용한 react router dom에 대해서 정리해보겠습니다. React Router DOMreact-router-dom은 React에서 페이지를 라우팅하고 관리할 수 있게 해주는 라이브러리임따라서 react-router-dom을 사용하면 URL로 화면에 표시할 컴포넌트를 쉽게 변경할 수 있음 설치 방법npm install react-router-dom  React Router Dom을 설치하고 아래 코드 예시대로 사용법을 살펴보자잉 Router, Routes, Route - 경로 설정 (코드 예시)import { Routes, Route } from 'react-router-dom';import Home from './components/Ho..

안녕React로 개발하다보면 불필요한 로직으로 인해 리렌더링 시 페이지의 성능이 떨어질 수 있는데이를 방지하기 위해 useMemo 훅을 사용하여 컴포넌트를 최적화하는 방법을 적어보겠습니다  useMemo useMemo는 React에서 제공하는 훅으로 특정 결과를 메모이제이션하여 성능을 최적화하고의존성 배열을 사용해 값이 변경되지 않으면 계산을 반복하지 않고 저장된 결과를 재사용함 코드 예시import React, { useState, useMemo } from "react";const HeavyComponent = () => { const [value, setValue] = useState(0); const heavyWork = () => { for (let i = 0; i heavyWork(..