🤍 은지log 🤍

const App = () => { const queryClient = new QueryClient(); return ( ; ); }; react-query 사용시 App.ts 를 감싸주어야한다. 📌 QueryClientProvider 로 감싸주지 않아서 생기는 오류 📌

💡 useQuery API연동에 특화된 라이브러리로 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줍니다. 반환 값을 활용하여 성공, 실패 처리가 가능합니다. ( isFetching, isLoading, error, state 등 ) Status isLoading : 현재 데이터 요청 중 isError : 오류 발생 isSuccess : 데이터 요청 성공 data : 요청 성공한 데이터 refetch : 다시 요청을 시작하는 함수 const Ex = () => { const result = useQuery('posts', postData); const { data, error, isLoading } = result; if (isLoading) return Loading...; if (error)..

라이브러리를 사용하지 않고 { useState, useCallback, useEffect, useRef } 를 사용해서 직접 구현해보기로 하였다 ! 🐥 사용하기만 해봤지 직접 구현하는데에는 너무 어렵고 이해도 잘 안되었지만 정보도 많았고, 도움도 받아가며 이것 저것 새로 시도해보는 재미도있었다 -💙 🔆 구현 코드 import { useState, useCallback, useEffect, useRef } from "react"; import styled from "styled-components"; import { getPostList, postType } from "datas/postList"; const List = (): JSX.Element => { const [page, setPage] = us..

반응형 웹이 웹 레이아웃을 만드는 기준이 되면서 반응형 레이아웃을 표시하기 위한 디바이스를 구분하는 여러가지 방법들이 사용되고 있습니다. 대표적으로 CSS 미디어쿼리를 사용하는 방법이 있고, 자바스크립트를 사용하기도 합니다. 어떤 것을 사용하더라도 반응형 레이아웃을 디바이스에 따라 구분하는 기준은 가로 너비입니다. 가로 너비 값에 따라 디바이스를 인식하고, 레이아웃을 거기에 맞춰 변경하는 것이 CSS 반응형 레이아웃의 기본 개념입니다. 가로 너비를 기준으로 하는 것은 반응형 레이아웃에서 공통이지만, 디바이스 종류별 너비 값 기준은 제각각입니다. 별도로 정해진 표준이라는 것이 없기 때문에 업계에서 많이 사용하는 값을 기준으로 하기도 하고, 레이아웃 특징에 맞춰 개별적인 값을 정하기도 합니다. 영어로는 나누..

라이브러리를 사용하지 않고 { useState 와 useEffect } 를 사용해서 직접 구현해보기로 하였다 ! 🐥 그전에는 react-bootstrap으로만 해봤던터라,, 조금 걱정했는데 역시나 어려웠지만 정보도 많았고, 이것 저것 새로 시도해보는 재미도있었다 -💙 🔆 구현 코드 import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { SLIDE_DATA } from "datas/slide"; const Banner = () => { const [currentSlide, setCurrentSlide] = useState(..

좌 우 로 카테고리 이동 및 터치슬라이드를 구현해야 하는 상황이였는데 라이브러리 사용없이 처음부터 구현하고 싶었지만 아직 내실력으론 무리,, 였ㄸㅏ;,, 여러 라이브러리가 많았지만 나는 Swiper 으로 구현해보기로 하였다 ! 🔆 Swiper 설치 npm install swiper 🔆 Swiper 예시 코드 import { Swiper, SwiperSlide } from 'swiper/react'; import { Pagination, Mousewheel, Keyboard } from 'swiper'; import 'swiper/css'; import 'swiper/css/pagination'; function () { return ( { console.log(swiper.activeIndex); }} ..

onChange, Click, KeyPress import { useState } from 'react' const EventPractice = () => { const [message, setMessage] = useState('') const handleClick = () => { alert(message) } const handleKeyPress = (e) => { if (e.key === 'Enter') { alert(message) } } return ( 이벤트 연습 { setMessage(e.target.value) }} onKeyPress={handleKeyPress} /> 확인 ) } export default EventPractice import { useState } from 'reac..

반복을 잘 사용하는게 react에서 코드를 줄일수 있는 중요한 방법이다. react에서 반복을 사용할때는 배열을 이용한다. map 함수는 배열에서 사용하는 함수이고 사용시 새로운 함수가 반환된다. const number = [1,2,3,4,5] const newNumbers = number.map( (e) =>{ console.log(e) }) // (e)가 각각 요소가 되어 1 2 3 4 5 가 반환된다. --- const numbers = [1,2,3,4,5] numbers.map( (number, i)=>{ console.log(i) }) // 0 1 2 3 4 --- const numbers = [1,2,3,4,5] const newNumbers = numbers.map((number, i) =>..

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. ✏️ useState import { useState } from 'react' const [변수, set(대문자)변수] = useState(''); set함수에 예전값 prev( ) 을 넣고 싶으면 콜백함수를 사용해야한다. filter 함수는 콜백 함수의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능을 한다. import { useState } from 'react' const Counter2 = () => { c..

useEffect(() => {},[]) useEffect 2번째 인자에 빈 배열을 넣어주게 되면 컴포넌트가 처음 렌더링 될때만 실행된다. 📌 useEffect 오류로 2번 실행 될때 📌 src/index.js에서 태그로 이 감싸져있으면 개발모드에서 두 번씩 렌더링된다. import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import reportWebVitals from './reportWebVitals' import './index.css' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( ⬅ 지우기 , ..