[Web] 페이지에 잔상이 남는 현상 처리

회사 업무 중, 페이지 전환 시 이전 페이지의 잔상을 보이지 않게 해달라는 요청을 받았습니다. 예를 들어, A 세미나 상세 페이지에서 세미나 목록 페이지로 이동한 후 B 세미나 상세 페이지로 이동할 때, B 세미나 상세 페이지에서 A 세미나 상세 페이지의 이미지가 보이는 현상이 발생했습니다.

문제 원인 분석

세미나 상세 페이지는 전역 변수를 주요 데이터로 사용하는 페이지였습니다. 페이지 이동 시, 이전 페이지의 데이터가 전역 변수에 남아 있어 잠시 동안 이전 페이지의 잔상이 남는 현상이 발생했습니다.

초기 시도 및 문제점

처음에는 전역 변수 사용을 배제하고, 페이지 내에서 새로운 state를 만들어 문제를 해결하려고 했습니다. 그러나 해당 전역 변수는 세미나 페이지 컴포넌트 외부에서 사용하는 컨트롤바에서도 사용 중이었습니다. 만약 전역 변수 사용을 배제하게 된다면, 컨트롤바 내에서 다시 데이터를 fetching해야 하고, 세미나는 주요 콘텐츠로 업데이트가 빈번할 것으로 예상되므로 전역 변수를 계속 사용하면서 문제를 해결할 방법을 찾아야 했습니다.

해결 방법: 전역 변수 초기화

전역 변수를 초기화하는 방법으로 문제를 해결했습니다. clearSeminar라는 reducer를 생성하여, 세미나 상세 페이지 내부의 useEffect의 return 부분에 clearSeminar 함수를 추가했습니다. 이렇게 하니, 세미나 상세 페이지에서 세미나 목록 페이지로 가는 순간 clearSeminar 함수가 실행되면서 기존의 세미나 데이터를 삭제하여 잔상 문제가 해결되었습니다.

seminarSlice 예제 코드

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
    // 초기 상태 정의
};

export const seminarSlice = createSlice({
    name: 'seminar',
    initialState: initialState,
    reducers: {
        clearSeminar: (state, action) => initialState,
    },
});

export const { clearSeminar } = seminarSlice.actions;
export default seminarSlice.reducer;

useEffect를 사용한 데이터 초기화

useEffect의 return문은 컴포넌트가 언마운트될 때 실행됩니다. 이를 이용하여 컴포넌트가 언마운트될 때 clearSeminar 함수를 호출합니다.

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { clearSeminar } from './seminarSlice';

const SeminarDetailPage = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        return () => {
            dispatch(clearSeminar());
        };
    }, [dispatch]);

    return (
        // 컴포넌트 내용
    );
};

 

로그 확인을 위한 middleware 추가

정확한 dispatch 동작을 확인하기 위해 redux-logger를 사용하여 로그를 확인했습니다.

store.js 예제 코드

import { configureStore } from '@reduxjs/toolkit';
import seminarReducer from './seminarSlice';
import logger from 'redux-logger';

export const store = configureStore({
    reducer: {
        seminar: seminarReducer,
    },
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

결론

위와 같은 방법으로 전역 변수를 유지하면서 페이지 전환 시 이전 페이지의 잔상을 제거할 수 있었습니다. useEffect의 return문을 활용하여 컴포넌트가 언마운트될 때 전역 변수를 초기화하는 방법은 전역 변수를 계속 사용하면서도 페이지 전환 시 잔상 문제를 해결하는 효과적인 방법입니다. 이를 통해 사용자 경험을 개선할 수 있습니다.