[react 에러] Warning: A component is changing an uncontrolled input to be controlled. (인풋 에러)

해당 input에 값을 입력하니까 이렇게 에러 메시지가 떴다. 1.초기: field.value가 undefined2. react 판단: 아,이건 uncontrolled Input 이구나!3. 값이 들어옴 : field.value가 string으로 변경4. react 혼란 : 어,,갑자기 왜 controlled 됨? 즉, uncontrolled 컴포넌트인데 controlled로 되서 react가 혼란을 겪고있다는 뜻.. ( )}> 작성한 코드를 보니까 form 형태에서 초기 defaultvalues에 '비밀번호 확인'필드를 지정을 안해줬고, 또한 value={field.value}를 보면 undefined 혹은 null이 들어왔을때의 처리를 안해줬기 때문에..

GET 요청시 parmas에 배열을 보내는 부분이 있어서 ,해당 요청 url을 확인했더니 //admin_api/users?role[0]=MANAGER&sort=createdAt:desc&offset=0&limit=15이런식으로 role[0] 이상한 값이 들어있다. 서버에서 원하는 url은 다음과 같은데../admin_api/users?role=MANAGER&role=ADMIN&sort=createdAt:desc&offset=0&limit=15이런식으로 '&'형태로 나열되는 것! 서버에서는 배열타입을 정의했기에 프론트에서 배열을 보내도 주소값이 이상하지 않게 처리를 해줘야한다!즉,query string 처리를 해줘야하는 것이다. 1. qs 설치query string 관련 형식 맞추기 편리하게 함수 제공하..

계정 등록 페이지에서 폼 필드에 값을 입력하고 '저장'버튼을 눌렀더니 'RangeError : Maxmum call stack size exceeded' 라는 에러가 떴다. 보통 재귀함수를 호출할때 발생하는 에러다. 해당 view 코드를 확인해보니 저장버튼을 눌렀을때 모달을 띄워 확인과 취소를 실행하게 하는데, 이때 취소버튼을 눌렀을때 모달이 닫히면서 현재 페이지의 상태를 유지해야한다. const handleRegister = handleSubmit(()=>{ showModal({ type: "default", dimmedColor: "transparent", title: "저장 성공", ..

다음과 같은 질문에 답은 뭘까?1. userB의 출력값은 뭘까?const userA = { name:"Tom", profile :{email:"Tom12@gmail.com"}};const userB = {...userA}userA.name="Mon"userA.profile.email = "Mon12@gmail.com"console.log(userB) 자칫하면 ' {name :"Mon", profile:{email:"Mon12@gmail.com"}} ' 으로 생각할 수 있다.userB는 userA의 얕은 복사본을 생성한다. name 속성이 얕은 복사 과정에서 '값'으로 복사가 되므로 userB.name에는 영향을 주지 않는다 .여기서 name이 그저 문자열이고, 문자열은 기본형(primitive) 이기 때..

참고문서에 따르면 useTransition은 UI의 일부를 백그라운드에서 렌더링 할 수 있도록 해주는 React Hook이라고 한다.즉, UI를 차단하지 않고 상태를 업데이트 할 수 있다.https://ko.react.dev/reference/react/useTransition useTransition – ReactThe library for web and native user interfacesko.react.dev 기본적인 형태는const [isPending,startTransition]= useTransition(); 1. isPending: 대기중인 transition이 있는지 알려준다.2. startTransition : 상태 업데이트(setState)를 transition으로 표시해주는 함..

const [rowSelection, setRowSelection] = useConditionalState({}, {}, [ offset, sort, ]); table에서 해당 row를 선택했을때의 상태관리를 하는 useConditionalState라는 커스텀훅을 사용하였다. 보면 useState와 유사하면서 특정 의존성이 변경될때 조건부로 상태를 업데이트하는 훅이다.첫번째 인자에는 초기 상태값, 두번째 인자에는 상태 업데이트 조건 함수 혹은 직접 설정할 값을 넣고,마지막 인자에는 의존성 배열을 넣는다.쉽게 말하자면 useState 와 useEffect를 합쳐놓은 느낌? 위 코드에서 보면 의존성 배열에 들어있는 offset,sort가 변경될때마다 '{}'로 초기화를 해주고 있는 것이다.다음..