[다이어리프로젝트] SPA 전역 상태 관리

💡 라우팅 & 전역 상태 관리

회원가입 및 비밀번호 찾기 페이지에서 상태가 유지되는 문제를 고민하고 해결한 방법을 기록해봄.

---

📑 문제파악

⦁ 회원가입 및 비밀번호 찾기 페이지에서 성공 상태가 계속 남아있음.
⦁ /join → /login → /join 같이 라우트를 전환해도 이전 성공 상태가 유지됨.
⦁ 이전 폼 입력값이 그대로 유지되고있음. 상태가 초기화되지 않음.

---

📑 초기 코드 분석

❓ 고민한 부분
1. React는 SPA(Single Page Application) 구조로 라우트가 바뀌면 기존 컴포넌트는 언마운트되고, 새로운 컴포넌트가 마운트됨. 정상적인 초기화를 예상했으나 왜 상태가 유지되고있나.
2. joinSuccess, findSuccess 변경될 때 폼을 초기화하는 코드작성했으나 성공컴포넌트가 렌더링되기도 전에 폼이 초기화되는 문제 발생. 어떤 타이밍에 상태를 초기화해야할 것 인가.

❗️ 해결방법
⦁ 전역 상태(Context, Redux, Zustand)는 라우트 전환해도 그대로 유지됨. 직접 상태를 reset하는 로직이 필요함.
⦁ 회원가입 및 비밀번호 찾기를 성공하면 폼 값 초기화 시켜야함. 추가적으로 폼상태 초기화 함수생성. 해당 라우트에 재접근하면 전역상태를 joinSuccess = false로 초기화해서 폼의 첫 화면이 다시 보이도록 처리.

---

📑 코드 수정

1. resetForm에서 input 값 초기화

 const resetForm = ()=>{
        setName("");
        setEmail("");
        setPw("");
        setPwchk("");
        setEmailValid(false);
        setCodesend(false);
        setCodeValid(false);
        setCodeInput("");
        setCodeVerify(false);
    }

2. 회원가입 성공 시 resetJoinForm( ) 호출

    const joinGo = async (email, pw, name) => {
       		...
            resetForm();
        } catch (error) {
            console.error("회원가입 실패:", error);
            ApiError(error);
        }
    };

3. joinSuccess 상태는 라우트에 재접근했을 때 별도로 리셋

    useEffect(() => {
        if (location.pathname === "/join") {
            setjoinSuccess(false);
        }
    }, [location.pathname]);

4. 비밀번호 찾기 컴포넌트 초기화 로직을 성공/라우트 재접근 케이스로 분리

    useEffect(() => {
        if (step === 3) {
            resetForm(); 
        }
    }, [step]);
    
    useEffect(() => {
        if (location.pathname === "/find") {
            setPwCheckSuccess(false);
            setStep(1);
        }
    }, [location.pathname]);