드디어 데이터를 가져와보자.. https://fakestoreapi.com/ Fake Store APIFake store rest api for your ecommerce or shopping website prototypefakestoreapi.com 이걸 사용해서 가져올거다. 1. CardList 컴포넌트 생성 import React, { useEffect } from 'react'import { useAppDispatch, useAppSelector } from '../../../hooks/redux'import CardItem from '../card-list/card-item/CardItem'import styles from '../card-list/CardList.module.scss'cons..

이 중에 맨 상단에 카테고리 탭을 구현할 것이다. 1. 카테고리 슬라이스 생성카테고리 폴더안에 파일을 만들어준 뒤export const CategoriesName = {    All:"",    Electronics:"Electronics",    Jewelry:"Jewelery",    MensClothing:"Men's clothing",    WomensClothing:"Women's clothing"} type 파일을 만들고,  import { createSlice } from "@reduxjs/toolkit";import { CategoriesName } from "./categories.type";const initialState = CategoriesName.All;   //초기에는 "" c..

DOM(Document Object Model)Elements = html 하나하나의 요소Document = 이 모든 요소들을 담고 있는 웹페이지DOM이란1. 이렇게 웹페이지에 들어있는 html element들을 트리형태구조로 표현한것.2. 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미.📑가상돔 Virtual DOM리액트는 가상돔을 사용하여 실제돔을 조작하는 일을 엄청나게 빠르게 해준다가상돔 = 실제 돔과 같은 내용을 담고 있는 복사본( 이 복사본은 실제돔이 아닌 JS객체형태로 메모리안에 저장되어있다)가상돔은 복사본이기 때문에 실제 돔안에 들어있는 모든 elements들과 속성들을 똑같이 가지고 있다굳이 복사본을 만드는 이유? → 리액트는 가상..

사용자가 입력한 검색어에 따라 다른 HTTP 요청을 보내고,그에 맞는 검색 결과를 화면에 보여주기 위해 탠스택 쿼리를 사용해보자!!!export default function FindEventSection() { const searchElement = useRef(); // 입력 필드에 접근하기 위해 useRef 사용 const [searchTerm, setSearchTerm] = useState(); // 검색어 상태 관리, 초기값은 undefinedsearchTerm은 검색어를 상태로 관리하는 useState입니다.초기값이 undefined이기 때문에, 초기에는 쿼리가 비활성화됩니다.useQuery의 설정 const { data, isLoading, isError, error } = useQue..

🎋useRef 기초useState vs useRefuseState컴포넌트의 상태를 관리할 때 사용됩니다. 상태가 변할 때마다 컴포넌트를 다시 렌더링하고 싶을 때 주로 사용됩니다. 상태를 변경하면 해당 컴포넌트가 다시 렌더링됩니다.useRef이전 값과 새로운 값을 연결하고, 렌더링과는 무관하게 값이 유지되어야 할 때 사용됩니다. 리렌더링 없이 데이터를 참조할 수 있게 해주며, 주로 변하지 않는 값이나, 리렌더링을 유발하지 않아야 하는 참조를 저장하는 데 사용됩니다.따라서 useState와 useRef는 서로 다른 용도를 가지고 있으며, 각각의 사용 사례에 따라 선택되어야 합니다.useRef를 사용하는 일반적인 상황은 다음과 같습니다.컴포넌트의 렌더링과 관련이 없는 값들을 저장할 때DOM 요소에 대한 참조..

portal로 만들어준 attendcountModal.tsx 파일에서useEffect의 인자값을 //eslint-disable-line으로 강제로 린트를 껐다.(최초의 한번만 뜨게하기 위해)open,close를 넣으면 각각의 상태 업데이트 계속 해줘서 무한루프가 도는 문제가 생겼다... useEffect(() => { if (haveSeenModal === 'true') { return } open({ title: `현재 참석자: ${wedding.attendCount} 명`, body: ( ), onLeftButtonClick: () => { localStorage.setItem('@..

참조(ref)란?참조(ref)는 React에서 DOM 요소나 클래스형 컴포넌트에 접근하기 위해 사용됩니다.예를 들어, input 요소에 포커스를 맞추거나, dialog 같은 내장 DOM 요소의 메소드를 호출할 때 사용합니다.컴포넌트 구조TimerChallenge: 타이머를 시작하고, 만료되었을 때 모달 창을 띄우는 역할을 합니다.ResultModal: 타이머가 끝났을 때 사용자에게 결과를 보여주는 모달 창입니다.1. useRef로 참조 만들기TimerChallenge 컴포넌트에서는 useRef를 사용해 두 개의 참조를 생성합니다:timer는 setTimeout으로 설정한 타이머를 참조합니다.dialog는 ResultModal의 dialog 요소를 참조합니다.const timer = useRef();con..