[TIL] 내일배움캠프 React 과정 2023.03.03

Today I Learned

• 로그인 모달, 회원가입 페이지, 마이 페이지 CSS 작업

 

---

input 태그 A component is changing a controlled input to be uncontrolled. 에러 

Warning: A component is changing a controlled input to be uncontrolled. 
This is likely caused by the value changing from a defined to undefined, which should not happen. 
Decide between using a controlled or uncontrolled input element for the lifetime of the component.

이 에러는 uncontrolled input이었다가 →  controlled input으로 바뀌면서 생긴 에러이다.

한마디로 초기값이 undefined 이었다가 → 렌더링 후에 값이 들어와 바뀌었기 때문이다.

 

<input value={nickname || ''} />

따라서 input의 value 값이 undefined일 경우의 예외 처리를 해주어야 한다.

 

출처 https://devbirdfeet.tistory.com/195

 

 

Next.js Abort fetching component for route: "/" 에러

next-dev.js?3515:20 Error: Abort fetching component for route: "/"

useEffect(() => {
    // 비로그인 유저일 경우 접근 제한
    if (status === 'unauthenticated' || router.query.loading === undefined) {
      router.push('/');
    }
  }, [session]);

회원가입 페이지에 조건문으로 로그인한 유저가 아닐 경우 메인으로 이동하도록 했는데 여기서 useEffect이 여러 번 실행됨에 따라 router.push까지 여러 번 실행되면서 에러가 발생한 거 같다.

 

 router.push('/', undefined, { shallow: true });

Next.js에서 리렌더링이 되지 않고 페이지를 한 번만 이동시키려면, router.push에 Shallow Routing 옵션을 true로 바꿔주면 된다.

 

Shallow Routing이란?

Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps, getStaticProps, and getInitialProps.
You'll receive the updated pathname and the query via the router object (added by useRouter or withRouter), without losing state.

 

출처

https://velog.io/@a_in/Next.js-Error-Abort-fetching-for-route

https://nextjs.org/docs/routing/shallow-routing

 

---

회고

생각보다 추가 기능 구현이 빨리 끝나서 오늘부터 팀원들 모두 본격적인 CSS 작업에 들어가기로 했다. 나는 로그인 모달, 회원가입 페이지, 마이 페이지, 캘린더 페이지의 CSS를 맡게 됐는데 캘린더 페이지 말고는 그렇게 어려운 부분은 없을 거 같고 수정된 figma 내용에 따라 세부적으로 조정하고 미디어 쿼리를 넣어주면 될 거 같다. 그리고 오늘도 각종 에러와 마주하는 중..🥹

 

섬네일용 로그인 모달