React-Hook-Form와 Zod

React-Hook-Form와 Zod

설치 및 임포트yarn add react-hook-form'use client'import { useForm } from 'react-hook-form';const { register, handleSubmit, formState } = useForm(); handleSubmitform의 onSubmit에 실행하고 싶은 동작을 handleSubmit의 인자로 넣어 준다const onSubmit = (value: FieldValues) => { // form 제출시 실행할 동작 console.log(value);};return ( )  registerinput 태그에 사용input 태그의 용도를 의미하는 id, 옵션을 넣어준다옵션 예시는 required (필수인지), pattern (정규식 검증이 ..

  • format_list_bulleted React
  • · 2024. 9. 30.
  • textsms

[Tanstack Query/Hooks] 네트워크 요청 결과에따라 훅 실행하기

로그인 요청을 서버로 보내고 나서, 성공할 경우 user 정보를 관리하는 zustand store에 정보를 업데이트하기위해 zustand의 훅을 사용했다. 그런데 ESLint에서 아래와같은 오류가 떴다! ESLint: React Hook "useUserStore" is called in function "onSuccess" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".(react-hooks/ rules-of-hooks) 리액..

  • format_list_bulleted React
  • · 2024. 9. 28.
  • textsms

[React] 내 tanstack query는 왜 에러를 내지 않을까??

지난 프로젝트 중 API URL을 설정해두지 않아 절대 네트워크 요청이 이뤄질 수 없는 상황이었는데 네트워크 에러는 나면서 컴포넌트 내부에서 탠스택쿼리의 isSuccess 를 조건으로 설정해둔 alert이 뜨는 현상이 있었다.대체 이게 뭐지..? 하다가 우선 당장 해야했던 기능 구현을 마무리하고 조금 여유가 생겼을 때 다시 알아보았다. 이유는 생각보다 간단했다! 탠스택쿼리의 queryFn, mutationFn에서 에러가 발생했을 때도 에러가 아닌 데이터를 return해주고 있었기 때문이다. 기존 코드export const postSignUp = async (userInput) => { try { const response = await authInstance.post('/signup', userI..

  • format_list_bulleted React
  • · 2024. 9. 26.
  • textsms

[Tanstack-Qeury / json-server] json-server에서 내림차순으로 정렬해 get 응답 받기

json-server를 이용해 프로젝트에 등록된 게시글들의 정보를 관리하기위해 tanstack query를 사용했다.json-server 자체에서 기준을 지정해 내림차순/오름차순으로 정렬한 값을 받을 수 있다는 것도 처음 알았고 tanstack query를 사용할 때마다 사용법이 약간 헷갈려서 간단한 부분부터 조금씩 정리해두고 봐야겠당 postsRequest.jsimport axios from 'axios';const API_URL = 'http://localhost:4000/posts';export const getPosts = async () => { try { const response = await axios.get(API_URL); return response.data; } cat..

  • format_list_bulleted React
  • · 2024. 9. 20.
  • textsms

[React] 리액트에서 classList 수정하기, 조건에따라 className 변경하기

문제입력에따라 tailwind 스타일을 적용하기위해 요소의 className을 추가하거나 제거해야하는 상황이 있었는데 class를 조작한다고하니 이전에 바닐라JS로 했던 방법이 떠올라 classList.add, classList.remove등을 사용했다. 그러나 계속 add가 존재하지 않는다거나하는 오류발생했다.. 찾아보니 리액트에선 DOM 요소에 직접적으로 접근하는 것을 권장하지 않는다고 한다!! 사용자 입력에따라 렌더링할 내용, 조건 등을 state로 관리하듯이 JSX 문법을 활용해 조건에 해당하면 currentStep 클래스를 포함시키고 그렇지 않은 경우 포함시키지 않는 방식으로 변경해야한다!!!  기존 방법const handleStepSelection = (e, element) => { pr..

  • format_list_bulleted React
  • · 2024. 9. 15.
  • textsms
[React/Vite] 카카오맵 API 마커 표시, 클러스터 라이브러리 사용해보기

[React/Vite] 카카오맵 API 마커 표시, 클러스터 라이브러리 사용해보기

마커 표시한 개import { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = document.getElementById("map"); const options = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new kakao.maps.Map(container, options); const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); const ma..

  • format_list_bulleted React
  • · 2024. 9. 13.
  • textsms