전체 글
프론트엔드 개발자 하고 싶은 취준생React Hook Form을 사용해 로그인 폼을 구성했지만, onSubmit과 onClick을 직접 처리하여 loginUser API를 호출하고 accessToken을 localStorage에 저장하려 했다.내가 생각하기엔 문제는 없어 보였는데 로그인 페이지가 렌더링 됨과 동시에 onClick안의 함수와 토큰 값을 출력하는 콘솔이 출력되는 문제가 발생했다.token=nulltoken=nullonClickFunction {}onClickFunction {}콘솔이 이런 식으로 나와 당황스러웠다.우선, 같은 콘솔 로그가 두 번 출력되는 이유는 React의 Strict Mode 때문인 것 같아 Strict Mode를 비활성화했다. 그럼 두 번째. 토큰은 왜 null이 나올까?코드를 보면서 설명해보려고 한다.우..
리액트의 strict mode는 예상하지 못한 에러를 방지해 주는 역할을 한다.배포할 때는 strict mode가 자동으로 비활성화되지만, 개발하는 과정에서는 예상치 못한 에러를 만들기도 한다.그래서 strict mode를 비활성화하고 사용하는 걸 선호하는데, React에서는 app.js 또는 index.js 파일에서 부분을 없애주면 된다.import React from "react";import ReactDOM from "react-dom/client";import App from "./App";ReactDOM.createRoot(document.getElementById("root")).render( // // 이 부분을 주석 처리하거나 제거 // ); 하지만 Next.js는 R..