dukDukz

Uncaught Error: Invariant failed: You should not use outside a https://hellowworlds.tistory.com/62 [React.JS] Error: Invariant failed: You should not use outside a 해결 방법 Error: Invariant failed: You should not use outside a 오류 : 불변 실패 : 외부에서 를 사용해서는 안됩니다. 음.. 이 오류가 발생한 이유는 태그로 전체를 감싸주지 않았기 때문이다. 감싸.. hellowworlds.tistory.com "react-router-dom": "^5.3.0", 6.x.x 버전부터는 switch를 사용하지 않음

import { Switch, Route, Redirect } from "react-router-dom"; 이렇게 Switch 안에서 Route와 Redirect 를 사용하게 된다. Redirect는 어떻게 활용하나? 여기서는 '/' 링크로 왔을때 '/dashboard'로 이동하게끔 했다. 다른 예시로는 isLogin = true 일때 '/' 로 isLogin = false 일때 '/login'으로 가게하는 방법도 많이 쓰인다. https://velog.io/@wlsdnjs156/ReactRouter-Redirect React[Router] - Redirect Redirect는 react-router-dom에서 import해서 사용 합니다.Redirect 컴포넌트는 랜더링되면 to로 지정된 경로로 이동 ..

Route 에서 render와 component가 있는데 무슨 차이일까..? props를 넘기고 싶을 때 불필요하게 컴포넌트를 다시 마운트하지 않기 위해서 render를 사용한다. https://zereight.tistory.com/976 React Router의 render와 component 차이 React Router의 render와 component 차이 출처 React에서는 Route 를 사용해서 라우팅을 할 수 있다. Route 태그에서 내가 원하는 URI로 이동하게 되면, 어떤 컴포넌트를 렌더링할 것인가를 정할 수 있다. 예를 zereight.tistory.com

1. xlsx 설치 yarn add xlsx 2. 엑셀 파일 다운로드 구현 import * as XLSX from "xlsx"; const ExcelDownload = () => { ... // 다운로드 할 엑셀 데이터 const [excelDownloadData, setExcelDownloadData] = useState({}); // API를 통해 다운로드 할 엑셀 데이터를 받아온다. [React-Query] const onSuccessGetExcelData = (data) => { setExcelDownloadData(data.excelData); }; const onErrorGetExcelData = (error) => { console.log(error); }; const { refetch: g..

여러 방법이 있겠지만 이번에는 localStorage 에 저장하는 방식을 이용했다. (블로그 참고) 1. 검색 시 저장 const onSubmit = () =>{ // 검색조건유지 setLocalStorage("searchCondition", inputs); } 검색 버튼을 눌렀을때 검색 조건들을 searchCondtion 이란 이름으로 localStorage에 저장한다. 2. 값 초기화 시 저장된 값 삭제 const onErroronGetInvoiceList = () => { // 검색조건유지초기화 localStorage.removeItem("searchCondition"); }; 3. 검색조건 유지 const searchCondition = getLocalStorage("searchCondition"..

1. map key를 사용하는 올바른 방법 {arr.map((data, key) => { return ( ... 2. 최상단에 를 사용하지 말 것 1) 최상단에 사용하여 key 값을 넣을 수 없다. {arr.map((data, key) => { return ( ... 2) 최상단에 를 넣고 그 아래에 key 값을 넣을 수 없다. {arr.map((data, key) => { return ( ... key 값을 넣었다면 그 아래에서는 사용이 가능하지만, 최상단에서는 사용 불가!

보통은 에러메시지를 보고 한번에 파악이 가능하지만 Text nodes / Whitespace는 생소함... 1. Text nodes cannot appear as a child of . tbody 밑에 바로 를 사용하지 말 것 2. Whitespace text nodes cannot appear as a child of table 밑에 바로 "" text nodes 를 사용하지 말 것

1. useInterval.js 작성 => hooks 로 만들어줌 import { useRef, useEffect } from "react"; export default function useInterval(callback, delay) { const savedCallback = useRef(); useEffect(() => { // useEffect에 매개변수로 받은 콜백을 현재 Ref로 선언해준다. savedCallback.current = callback; }); useEffect(() => { function tick() { savedCallback.current(); } // useEffect에 Ref의 current를 setInterval를 delay 시간동안 해준다. let id = setI..