웹/React

🟩문제 import React, { Component, useCallback, useEffect, useState } from "react"; const Test = () => { const [count, setCount] = useState(0); const [products, setProducts] = useState([]); const [loading, setLoading] = useState(false); const onClickHandle1 = useCallback(() => {}, []); console.log(`전체 컴포넌트랜더링 count : ${count}`); useEffect(() => { console.log("useEffect 랜더링"); setCount(count + 1); fe..

🟩 DevExtrem이란? devExtreme은 화면에 테이블을 쉽게 만들어주는 라이브러리 입니다. const row = [ { non: "555", q: "5", w: "3", e: "5", r: "6", }, { non: "배배", q: "11", w: "333", e: "52355", r: "253256", }, ]; const column = [ { caption: "테스트1", dataField: "non", }, { caption: "테스트2", dataField: "q", }, { caption: "테스트3", dataField: "w", }, { caption: "테스트4", dataField: "e", }, { caption: "테스트5", dataField: "r", }, ]; 이러한 ..

useEffect를 사용할 때 어떤 useState 를 어떤 데이터가 오기도 전에 변경시킨 다면 에러가 날 수 있습니다. useEffect 안에서 비동기 로직을 수행하면 데이터가 늦게올 수도 있습니다. 그전에 State를 변경시키면 페이지를 계속 새로고침 할것 입니다. 요청이 늦게 올 떼, 컴포넌트가 unmount되어 요청이 대기중인 상태에 발생하는 에러 라고합니다. unmount되어 => 비활성화 되며(=화면에 안뿌려지며) 요청이 대기중인 상태 => axios로 요청한거 안올 때 완성 코드입니다. const [isLogin, setIsLogin] = useState(false); //로그인 관리 const [info, setInfo] = useState({}); const cookie = new Coo..

현제 라우터 상황 보내고 싶은 것 여기서 url 은 `/item/${data.id}` 입니다. Route로 state를 보내기는다는데 어떤식으로 받는지 모르겠습니다. 이렇게 props로 받는거 같았는데 찍히지는 않습니다. http body 형식으로 json을 받아오는게 목표입니다. 찾아보니 match, location, 등을 써서 불러오는데 Router 버전이 달라서인지 지금은 먹히지 않았습니다. 유튜브를 찾아보니 useLocation()이라는 함수가 있었습니다! 이걸로 Link에서 보낸 state를 가져올 수 있게되었습니다. 근데 이렇게 하면 locatino에 state 부분이 null이 찍히게 됩니다. Link를 다시 수정해야 합니다. https://stackoverflow.com/questions/..

react를 사용하다 fetch말고 axios로 하고싶었다. fetch도 좋지만 axios를 쓰면 좋다고 합니다. 그럼 왜 axios를 쓰면 좋을까? Fetch()는 body 프로퍼티를 사용하고,axios는 data 프로퍼티를 사용한다. Fetch의 url이 Fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어간다. Fetch에서 body부분은 stringify()로 되어진다. 출처: https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API axios로 데이터를 요청할 때 코드가 더 깔끔한거 같네요. 이런식으로 데이터를 jdata라는 변수에 저장하려고 합니다. 참고로 url 안의 내용은 { "id": 1, "crea..

당근마켓 처럼 화면을 만들어봤습니다. 문뜩 든 고민이 String타입으로 DB에 저장하는건 이해가 가는데 img들은 어떻게 저장하지? 라는 의문이 들었습니다. blob 형태로 db에 넣었다가 뺐다 하는 것을 생각했습니다. 서버 특정 폴더에 img 파일들을 저장하고 db에는 경로만 적자 라고 생각했습니다. 1번의 경우는 okky 게시판의 충고글을 보고 너무 비효율적이라고 합니다. 그래서 패스 2번을 생각했는데 그러면 img 파일들이 어마어마하게 서버에 올건데 이걸 어떻게 관리해야하나? 라는 생각이 들었습니다. 아니면 의외로 img 파일들은 용량을 안먹나? 라고 생각을 했습니다. react에서 img들 뿌려보기 예를 들어 src에 images들이 있다면 이렇게 json형식에 "imgsrc" 부분이 서버에서 ..

fetch 일단 fetch부터 살펴봐야 합니다. fetch("url")을 넣으면 요청을 보냅니다. response을 fetch().then()으로 다룰 수 있습니다. useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, []); then()안에 () => {} 형태로 람다 함수를 집어넣을 수 있는거 같습니다. then()을 대채하려는게 async, await인듯 합니다. 비동기 처리및 콜백함수라고 하는데 요청이 들어왔을 때 실행된다! 라는 함수입니다. fetch로 문자들..