전체 글39 소개 React Router는 SPA 방식에서 URL에 따라 페이지를 렌더링 해주는 라이브러리다. Feature Overview v6.21.3 | React Router Feature Overview Client Side Routing React Router enables "client side routing". In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When reactrouter.com 설치 npm install react-router-dom ya.. 2024. 1. 31. useEffect 1. 소개 import { useEffect } from 'react'; 리액트 컴포넌트가 렌더링 된 이후에 다양한 함수를 수행할 수 있도록 하는 Hooks이다. DOM 업데이트를 수행한 이후에 호출된다. 2. 실행 useEffect(() => { console.log('useEffect 실행'); return () => { console.log('clean up 실행'); } }, []); useEffect의 인자는 2개가 존재한다. 수행할 콜백 함수 의존성 배열 의존성 배열의 존재 유무, 의존성 배열 안에 변수 유무에 따라 수행하는 방식이 달라진다. return으로 함수를 반환하는 것을 cleanup 함수라고 한다. cleanup 함수는 컴포넌트의 언마운트시 실행된다. return을 안 쓰면 clea.. 2024. 1. 27. 소개 1. React Query React Query는 서버로부터 가져온 데이터의 상태 관리를 도와주는 라이브러리다. 흔히 React Query로 많이 알고 있는데 V4부터 vue, svelte, solid에서도 사용이 가능해지면서 Tanstack Query로 이름을 변경했다. (이후의 글들은 모두 V5에 맞춰 포스팅할 것이다.) Overview | TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing an.. 2024. 1. 24. React-Cookie 1. Issue 클라이언트에서 로그인 요청이 들어오면 서버에서 토큰을 발급한다. 발급받은 토큰을 Redux로 관리한다. 페이지를 새로고침 하면 Redux state가 초기화된다. 2. About 웹 서버가 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보 웹페이지 방문 시 방문 기록 등 브라우저의 정보들이 저장된 텍스트 파일 3. Install Terminal $ npm install react-cookie CDN 4. Use // index.js import React from 'react'; import App from './App'; import { CookiesProvider } from 'react-cookie'; export default func.. 2023. 1. 8. CryptoJS 1. About JavaScript에서 해시 함수를 통해 암호화를 할 수 있도록 해주는 Node.js 패키지다. 2. Install // JavaScript $ npm install crypto-js // TypeScript $ npm install --save-dev @types/crypto-js 3. Use // crypto-js 불러오기 import crypto from 'crypto-js' // 암호화 할 데이터 const data = { name:'youngjin', age: 28 }; // 비밀 키 지정 const privateKey = 'secretkey'; // AES알고리즘 사용 암호화 const encrypted = crypto.AES.encrypt(JSON.stringify(data).. 2023. 1. 6. useRef 1. Issue React는 State가 변경될 때마다 렌더링 된다. input 값을 useState로 관리하면 불필요한 리렌더링이 발생한다. 이를 방지하고자 input 값을 useRef로 관리한다. 2. useRef useRef는 저장공간(변수 관리), DOM 요소에 접근하기 위해 사용되는 React Hooks이다. 3. Refactoring (Before) // auth.js import { useState } from "react"; import { Typography, Box, TextField, Button } from "@mui/material"; const Auth = () => { const [id, setId] = useState(""); const [password, setPasswor.. 2023. 1. 5. 이전 1 2 3 4 5 ··· 7 다음
