React (22) 썸네일형 리스트형 [React] Tanstack 쿼리 , POST POST 컴포넌트 내 const { mutate } = useMutation({ mutationFn: createNewEvent, onSuccess: () => { queryClient.invalidateQueries({queryKey:"events"}); // 정확하게 key가 일치해야하는 경우 // queryClient.invalidateQueries({queryKey:"events",exact:true}); navigate("/events"); }, }); function handleSubmit(formData) { mutate({ event: formData }); } createNewEvent 함수import { Quer.. [React] Tanstack 쿼리 1.특징 - Http 요청을 전송하고 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리- 코드가 매우 간결, 고급 기능이 Build in 되어있음- 즉각적인 결과와 업데이트된 데이터를 빠르게 얻을 수 있음주의- Http 를 전송하는 로직이 내장되어 있지 않음 > 직접 코드 작성 해야 함- 대신 요청을 관리하는 로직을 제공(요청 관련 데이터, 발생 가능한 오류를 추적) 2. 사용방법App.jsxfunction App() { return ( QueryClientProvider client={queryClient}> RouterProvider router={router} /> QueryClientProvider> );} 사용하는 컴포넌트 co.. [React] 인증 Authentication tokens사용자가 인증받은 다음 서버에는 이 토큰을 생성하고 그것을 클라이언트에게 전송토큰(알고리즘에 따라 생성된 스트링으로 몇가지 정보를 담고 있음) 토큰을 생성한 백엔드만이 해당 토큰의 유효성을 확인하고 검증 가능백엔드만이 알 수 있는 개인키를 활용해 토큰 생성클라이언트가 백엔드에 요청을 보낼 때 해당 토큰을 요청에 첨부하면 백엔드는 토큰을 살펴보고검증하고 또 그 토큰이 그 백엔드에서 만들어진건지 확인 > 유효한 토큰이면 접근 승인 1. 로그인 시function login(){ const response = await fetch('로그인 요청 주소및 코드..'); // 서버에 로그인 요청 코드... const resData = await resp.. [React] Router , action, defer() 컴포넌트 파일에 (컴포넌트 내에 X) action 함수를 만든다.// action 함수도 리액트 라우터에 의해 실행 됨export async function action({params, request}){ const data = await request.formData(); const method = request.method; const e.. [React] router loader, useNavigation loader() 사용 loader() 사용 전import { useEffect, useState } from 'react';import EventsList from '../components/EventsList';function EventsPage() { const [isLoading, setIsLoading] = useState(false); const [fetchedEvents, setFetchedEvents] = useState(); const [error, setError] = useState(); useEffect(() => { async function fetchEvents() { setIsLoading(true); const res.. [React] router 멀티페이지 어플리케이션 단점 > 항상 새 콘텐츠를 가져와야 함 > 새로운 HTTP 요청을 전송하고 새로운 응답을 받는 과정에서 사용자의 흐름이 중단될 수도 있음 > 지연이 발생할 수 있음 > 사용자 경험 저하 > 복잡한 사용자 인터페이스 구축 시 싱글 페이지 어플리케이션 사용 SPA > 최초 HTML 요청 하나만 전송 > HTML 파일과 추가적인 JS 다운로드 되고 클라이언트에서 실행되는 추가 JS 코드는 사용자가 화면에서 보는 것들을 실제로 조절 SPA에서 라우팅사용 > 클라이언트 측에 리액트 코드 추가 가능하고 이것이 사용중이 URL을 감시 URL 이 변경될 떄마다 작동하여 URL 이 변경되면 화면에 다른 콘텐츠를 표시하게 됨 > 백엔드로부터 새 HTML 파일을 로딩하지 않고 약간의 클라이언트 측 코.. [React] Redux 리덕스 정의 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템 애플리케이션에 있는 하나의 중앙 데이터(상태) 저장소 - 하나에 모든 데이터 상태 저장 *** 로컬 상태 : 하나의 컴포넌트에 연관된 상태값 크로스 컴포넌트 상태 : 다수의 컴포넌트에 미치는 상태값 (ex) Modal 여닫는 상태값, prop drilling prop chains 로 구현) 앱와이드상태 : 전체 앱에 영향을 주는 상태 ex) 사용자 인증, prop drilling prop chains 로 구현) 규칙 순수 함수 동기식 이어야 하며 부수 효과가 없어야 함(리듀서 안에서 부수효과 사용 불가) 리덕스 VS 리액트 컨텍스트 리액트 컨텍스트 단점 - 설정 복잡, 관리 복잡, 대형 애플리케이션에서 구축할 경우 중첩된 JSX .. [React] Form Validation check 1. validation 방법 1) 양식 제출 후 체크인 경우 (1) ref 사용 장점 : 코딩이 간결 단점 : 값 재설정이 어려움 import { useRef } from "react"; export default function Login() { const email = useRef(); const password = useRef(); function handleSubmit(event) { event.preventDefault(); const enteredEmail = email.current.value; const enteredPassword = password.current.value; } return ( Login Email Password Reset Login ); } event.prevent.. [React] Custom Hook 1. Hook 의 규칙 - 리액트 컴포넌트 내에서만 사용해야 함 - 중첩 함수 내에 있으면 안됨 2. Custom Hook 이 필요한 이유 - 컴포넌트 내 코드 간결화 - 커스텀 훅에서는 컴포넌트 밖의 함수 임에도 훅을 사용할 수 있다. - 작성한 함수를 다른 컴포넌트에서 재사용 가능하다. custom-hooks.js 커스텀 훅 import { useEffect, useState } from "react"; export function useFetch(fetchFn, initialValue) { const [isFetching, setIsFetching] = useState(); const [error, setError] = useState(); const [fetchedData, setFetchedDa.. [React] Http 연결, fetch 1. fetch 사용법 get 메서드 보내는 법 export default function Test(){ const [datas, setDatas] = useState([]); // 상태값을 업데이트 하고 있기 때문에 무한 렌더링을 피하기 위해 useEffect 사용 useEffect(()=>{ fetch('http://localhost:8080/test').then((response)=>{ return response.json(); // 받은 response객체를 json형태로 변환 }).then((resData)=>{ setDatas(resData.testObj); // json으로 변환한 response결과에 접근 }) },[]); return {datas.map((elem)=>{elem.title.. 이전 1 2 3 다음
