회원가입,로그인 기능을 구현할때 React-hook-form 을 사용하면 훨씬 편하고 성능면에서도 좋다고해 어떤점에서 편하고 좋은지 알아보고 사용하려고 한다 React-hook-form 은 기본적으로 비제어 컴포넌트 로 동작한다고 한다 💡비제어 컴포넌트란? 폼 요소의 상태(state)를 직접 제어하지 않고, DOM 자체에서 값을 가져오거나 조작하는 컴포넌트 방식이다 비제어 컴포넌트는 폼 요소의 값을 사용자 입력에 따라 자동으로 업데이트하거나, 값을 가져와서 필요에 따라 처리할 수 있다 💡제어 컴포넌트란? 리액트의 상태(state)를 사용하여 사용자 입력을 관리하는 컴포넌트이다 사용자 입력에 따라 컴포넌트의 상태가 업데이트되고, 상태의 변경에 따라 렌더링이 다시 수행된다 제어컴포넌트 vs비제어 컴포넌트..

인풋창에 글씨를 입력하는데 이상한 에러가 떴다 act-dom.development.js:86 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: =>이 경고 메시지는 React의 제어 컴포넌트(controlled component)와 비제어 컴포넌트(..

📌createBrowserRouter createBrowserRouter()에 라우팅 할 path와 element로 작성할 수 있다. children 속성으로 배열에 중첩된 라우터(Nested Router)를 추가해 줄 수 있다 "/"라는 path를 가지면 Root컴포넌트가 실행되고 Root의 자식 컴포넌트는 Home,Product가 있다. errorElement (v5에는 없고, v6에는 있음) 우리의 컴포넌트에 에러가 발생해서 충돌나거나, 컴포넌트의 위치를 찾지 못할 때 사용. Root element path에도 에러를 추가할 수 있다 다른 컴포넌트들을 또 다른 컴포넌트에서 발생하는 문제로부터 보호해준다 하나의 컴포넌트에서 에러가 나도, 다른 페이지를 보는데 문제가 없게 된다 const router ..

프로젝트 유지보수 해야지 하다가 한달만에 .... 여러 수많은 에러를 겪었는데 적지 않아 기억이 나지 않는다 📌기본세팅 const api = axios.create({ baseURL: process.env.REACT_APP_API_URL, headers: { "content-type": "application/json", }, withCredentials: true, }); 바로 에러 프로젝트에서 content-type을 두가지 사용해야 되서 두가지 적용을 해야하기 때문에 따로 빼야했다 ㅎㅎ const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, withCredentials: true, }); 📌axios.interceptors.r..