React Code const BASE_URL = "http://localhost:3001"; const Mypage = () => { const [content, setContent] = useState(""); const [uploadedImg, setUploadedImg] = useState({ fileName: "", fillPath: "" }); const fileAdd = () => { let file = document.getElementById('fileAdd'); file.click(); } const onChange = (e) => { setContent(e.target.files[0]); }; const onSubmit = (e) => { e.preventDefault(); const..

네이버 const { naver } = window; const location = useLocation(); const NAVER_CALLBACK_URL = 'NAVER_CALLBACK_URL 넣어주세요.'; const NAVER_CLIENT_ID = '클라이언트 ID'; const initializeNaverLogin = () => { const naverLogin = new naver.LoginWithNaverId({ clientId: NAVER_CLIENT_ID, callbackUrl: NAVER_CALLBACK_URL, isPopup: false, loginButton: { color: 'white', type: 1, height: '47' }, }); naverLogin.init(); }; c..

react-router-dom의 hooks를 사용하여 경로를 설정해보자 사용할 hooks는 useHistory이다. 예제에서 링크를 버튼으로 만든 뒤, onClick 이벤트를 걸어서 경로를 변경시킬 것이다. import { useHistory } from "react-router-dom"; useHistory를 import 해준다. const history = useHistory(); history.push('/List')}>List 이동 버튼을 클릭 시 해당하는 컴포넌트로 이동하게 된다.

React Query 란 무엇입니까? React Query는 상태 관리 도구이며 '글로벌 상태'와 관련이없는 서버 상태 React 애플리케이션에서 원격 비동기 데이터 를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 데 사용됩니다 . 설치 $ npm i react-query 또는 $ yarn add react-query React Query에서 가장 환영받는 부분 중 하나는 전용 devtools 세트와 함께 제공된다는 것입니다. React Query를 사용한 여정이 재미 있고 놀라운 경험이되기를 원한다면이 devtools를 원할 것입니다. 수행해야 할 작업은 다음과 같습니다. import { ReactQueryDevtools } from "react-query/devtools"; react에서 비동기를 ..

1. useMemo() 이 함수는 React Hook 중 하나로서 React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용된다. function App() { const [count, setCount] = useState(0) const expFunc = (count)=> { waitSync(3000); return count * 90; } const resCount = expFunc(count) return ( Count: {resCount} setCount(e.target.value)} placeholder="Set Count" /> ) } 위 코드에 expFunc은 3분후 실행되는 비싼 함수이다. 이 함수는 count를 입력받아 3분을 기다린 후 90을 곱하여 리턴한다. 또한 useState ..

기본적인 라우터의 동작 방식 라우터에는 가 보통 많이 사용되며 와 를 통해서 라우팅을 구현하는 방식이다. 예를 들어, 홈페이지, 영화페이지, 리뷰페이지가 있다고 하자. 각각의 URL을 / , /movies , /reviews 라고 했을 때, 다음과 같이 구현할 수 있다. import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; const Routes = () => { return ( ); }; 3가지 컴포넌트가 있다는 가정하에, 위와 같이 path 속성을 통해서 각각의 컴포넌트가 렌더링 되는 URL이 정해진다. 그러나 여기서의 문제점은, 홈페이지에 들어갔을 때 /movies 와 /reviews ..