매일 공부한거 기록하기

react-hook-form을 간단하게 알아보자 왜냐면.. 그냥 궁금하니까.. 0. 기존 form의 유효성 검사 기존 form에서 유효성 검사에서 이름, 비밀번호, 주소, 휴대폰번호 등을 검사하게 된다. name만 관리한다고 해도 name이 변경되는 값을 관리해야하는 1. input값이 변경될때마다 Handler에서 state들을 setState를 해줘야하고, 2. submit 버튼에서 validate함수를 실행시켜야하고 3. validate 에서 name.length ===0일때 등의 유효성검사를 해야함 만약에 관리해야할 state들이 늘어나게 된다면? 로직의 길이가 매우 늘어나고, 복잡해진다 const [data, setData] = useState({ testName: "", email: "", }..

공식문서 보고 정리해보깅~ https://ko.reactjs.org/docs/hooks-reference.html#usereducer Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 1. useReducer란? useState의 대체 함수이다. 다수의 하위값을 포함해 복잡한 정적로직을 만들때 다음 state가 이전 state에 의존적인 경우에 선호한다. 2. 싫어요 버튼을 만들어보자 //초기값 설정 const initialHate = { count: 0 }; // const [state,dispatch] = useReducer(reducer,initialState); const [hate..

M A T E R I A L - U I MUI란? material UI가 버전이 변경되면서 MUI로 이름이 변경되었다. 간단하게 React를 위한 UI라이브러리! 부트스트랩같은거라고 생각하면 되려나 :) Material UI is a library of React UI components that implements Google's Material Design. 구글 Material Design을 구현하는 React UI 컴포넌트 라이브러리 입니당! 공식문서 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React co..

2023.02.02 - [Frontend/React] - React에서 setInterval() 과 useInterval()무엇을 써야할까 React에서 setInterval() 과 useInterval()무엇을 써야할까 setInterval()을 사용해서 자동으로 이미지가 넘어가는 carousel을 만들려고 했다^^... imgIndex를 하나씩 넘겨주고 마지막 인덱스라면 다시 0으로 보내는 간단한 기능이다. const autoSlide = () => { setImgIndex(im diary-of-lemon.tistory.com 위의 글 처럼 예상되로 동작하지 않는 상황이었다. useEffect에서 함수를 실행시켜주고, 실행이 끝날때마다 setInterval함수의 ID를 clear해줬다. setInte..

setInterval()을 사용해서 자동으로 이미지가 넘어가는 carousel을 만들려고 했다^^... imgIndex를 하나씩 넘겨주고 마지막 인덱스라면 다시 0으로 보내는 간단한 기능이다. const autoSlide = () => { setImgIndex(imgIndex + 1); if (imgIndex === imgData?.length - 1) { setImgIndex(0); } }; delay도 만들고 setInterval()로 하면 되지 않을까 생각했다^^.. const [delay, setDelay] = useState(1000); setInterval(autoSlide, delay); 근데 이게 어떻게 되냐면 1초 간격으로 잘 넘어가다가 1,2 -> 1,2 -> 1,2 -> 1,2 -> ..

isLoading isFetching 언제 써야할까? isLoading은 쿼리 전체적인 상태를 가리키는것이고, 초기 로드를 포함한다. 반면에 isFetching은 쿼리가 오직 refetched될때만 가리킨다. 처음 data를 받아올땐 isLoading이 true가 되고 그 후에 다시 refetch한다면 isFetching이 true가 되는것이다.

id별로 data를 가져오려고 했다. 모든 data를 가져오는 query처럼 singleAPI에 id만 넘겨주면 될거라고 생각했으나..^^.. useQuery(QUERY_KEYS.PRODUCT,getSingleProductAPI(id)); Missing queryFn error 가 발생했다 위에 코드는 useQuery에 funtion을 전달하지 않고, 함수를 실행하는 것이였다. const {data: singleProduct} = useQuery( [QUERY_KEYS.PRODUCT, productId], () => getSingleProductAPI(productId) ); 이렇게 querykey에 의존성배열로 만들어주고 , () => api(param)을 넘겨주면 된다 ! 키키 틀리면 지적 환영

1. devtools는 reqct-query를 설치했다면 포함되어있다. 2. APP.tsx에 아래처럼 불러와준다. import { ReactQueryDevtools } from "react-query/devtools"; 3. component 내부에 추가시켜준다.

최근에 React-Redux 말고 React-Query를 써봤다. 처음 써봤는데 편리하고 좋아서 제대로 정리하면서 공부해보려고 한답. 그냥 번역해보면서 읽은거니까.. 틀리면 말해주세욤 ↓공식문서↓ https://react-query-v3.tanstack.com/overview React Query : 서버스테이트를 fetching, 캐싱, 동기화 ,업데이트 해주는 React 라이브러리이다. React Query는 왜 만들었을까? : 기존 상태관리 라이브러리는 클라이언트 상태를 관리하기 좋았지만 비동기와 서버스테이트 관리에는 좋지 않았다. React Query를 쓰는 이유 : 많은 로직들을 없애줄것임 : 서버 스테이트들을 쉽고 안정적으로 유지시켜줄것임 : 최종사용자들에게 애플리케이션을 예전보다 좀 더 빠르..

디자인 후다닥 넣어서 완성 ~ .. today로 가는 버튼은 클릭시 setCurrentMonth를 현재 month로 set 해줬고, setSelected를 현재 날짜로 set해줬당 화면은 currentMonth가 바뀔때마다 렌더링되므로 화면도 당연히 이동된당 현재 날짜 선택은 렌더링된 현재 날짜를 setSelected에 set해줬다. 삼항연산자를 이용해 className에 selected ? "selected" : "" 를 추가해줘서 css를 변경할 수 있게 했답~~~~~~~~