왜 새로고침하면 사라지는데?

배포 문제에 이어 연달아 생긴 문제 때문에 기분이 몹시 좋지 않네요....

 

그냥 모른 척 넘어가볼까 했는데 하필 직전이 새로고침 문제였어가지고...

 

예 해결해봅시다.

 

❌  LocalStorage에 저장되는 시점

 

상세페이지에서 localStorage에 저장이 안되고 직전 페이지로 넘어가야 localStorage에 저장되는 문제가 발생했습니다.

이게 왜 문제가 되냐....

 

등록을 하고 새로고침을 한 후 직전페이지로 넘어가면 등록되어 있는 포켓몬이 하나도 없는 불상사가 일어납니다.

 

const Dex = () => {
    const myPokemon = useSelector((state) => state.myPokemon);

    useEffect(() => {
        localStorage.setItem('pokemon', JSON.stringify(myPokemon));
    }, [myPokemon]);

    return (
        <>
            <Dashboard />
            <PokemonList />
        </>
    );
};

export default Dex;

 

Dex 컴포넌트를 살펴보면 Dex 마운트 시 myPokemon이 변경될 때 마다 localStorage에 포켓몬 친구들을 저장해주게 됩니다. 

그런데 Detail 컴포넌트는 Dex의 하위 컴포넌트에 존재하지 않습니다. 따라서 Detail 컴포넌트에서 myPokemon이 바껴도 useEffect를 실행하지 않는 것입니다.

 

✅ 해결 방법: useEffect의 위치 조정

function App() {
    const myPokemon = useSelector((state) => state.myPokemon);

    useEffect(() => {
        localStorage.setItem('pokemon', JSON.stringify(myPokemon));
    }, [myPokemon]);

    return (
        <>
            <GlobalStyle />
            <ToastContainer autoClose={1000} />
            <Router />
        </>
    );
}

export default App;

 

상위 컴포넌트로 올리게 되면 이제 myPokemon이 Dex나 Detail 컴포넌트에서 바뀌게 되면 useEffect를 실행하기 때문에 정상 작동됩니다.

 

등록하고 새로고침 눌렀습니다...!