본문 바로가기

전체 글

 (40)
[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..

티스토리툴바