스낵바 성능 개선하기 - 문제 해결(1)

스낵바 성능 개선하기 - 문제 인식

위 글에서 설명한 문제 중 두 번째 문제를 해결한 과정을 적어보려 한다.

 

우선 스낵바가 열리고 3초 후에 닫히는 로직은 다음과 같다.

스낵바 동작 순서

1. openSnackbar('로그인 되었습니다.') 호출

2. 전역 상태 변경 ▶ isSnackbarOpen = true, message = '로그인 되었습니다.' 

3. useEffect에서 isSnackbarOpen = true가 된 걸 감지하고 setTimeout 함수 실행

 

useEffect(() => {
  if (!isSnackbarOpen) return;

  const timerId = setTimeout(() => {
    dispatch(closeSnackbarAction());
  }, 3000);

  return () => clearTimeout(timerId);
}, [isSnackbarOpen]);

 

4. 3000ms 후 dispatch를 통해 전역 상태 변경 ▶ isSnackbarOpen = false, message = ' ' 

문제 해결법 1

먼저 내가 생각한 문제의 원인은 다음과 같다. 

 

스낵바 컴포넌트는 열리는 순간 3000ms 동안 위로 올라갔다가 내려가는 animation이 적용되어있다. 만약 setTimeout이 3000ms 후에 dispatch 함수를 바로 실행시킨다면, 3000ms 동안 스낵바가 보이고 바로 isSnackbarOpen = false로 바뀔 것이다.

 

그러나 setTimeout은 비동기로 동작하기 때문에 정확히 3000ms 후에 콜백 함수가 실행된다는 보장이 없다. 따라서 내 생각에는 3000ms 이상의 시간이 흐른 후에 콜백 함수가 실행되어서, 3000ms 동안 스낵바 컴포넌트는 위로 올라갔다가 아래로 다 내려갔는데 여전히 isSnackbarOpen = true 여서 처음 모습을 다시 보여준다는 생각이 들었다.

 

그래서 setTimeout의 timer 시간을 줄여서 2500ms를 걸고, 스낵바가 내려가는 도중에 isSnackbarOpen = false가 되도록 코드를 수정했다. 완벽한 해결법은 아니라고 생각했다. 왜냐하면 브라우저가 지금보다 더 많은 일을 하고 있거나, 네트워크 상태가 안 좋으면 2500ms를 걸었음에도 이전처럼 3000ms 이상의 시간 후에 setTimeout의 콜백 함수가 실행될 수 있기 때문이다.

 

그래도 일단 깜빡이는 모습이 없어지긴 해서 조금 불편함 마음으로 노트북을 덮었다...

문제 해결법 2

이번에 면접을 보다가 여태까지 겪어본 기술적 어려움에 대해 설명해달라는 질문을 받았고 아직 해결하지 못했지만 이 스낵바가 계속 머리에 맴돌아서 이 문제에 대해서 말씀드렸다.

 

그랬더니,,,,,면접관님이 즉석에서 문제를 해결해주셨다,,,,,,리스펙,,,,

 

면접관님께서는 스낵바 컴포넌트의 style에 다음과 같은 속성을 추가하면 될 것 같다고 하셨다.

 

animation-fill-mode: forwards;

 

이 속성을 적용하면 스낵바 컴포넌트의 애니메이션이 끝난 이후에 스낵바 스타일이 다시 초기 상태로 돌아가지 않고 애니메이션이 끝났을 때 상태를 계속 유지한다고 한다.

 

즉, 3000ms 이후에도 isSnackbarOpen = true여서 DOM에 존재하지만 애니메이션이 끝난 상태가 유지되면서(스낵바가 밑으로 내려가서 안보임) 사용자의 눈에는 안 보이는 것이다! 그래서 적용했더니,,,,아주,,, 잘된다,,,,

 

앗 하나 주의할 점은 amination-fill-mode를 animation 선언 후에 적용해야 한다. 

 

그렇게 위의 스낵바 문제 중 두 번째 문제였던

 

2. 스낵바가 열리고 닫힐 때, 간헐적으로 깜박이며 다시 모습을 나타낸다.

 

이 문제를 해결했다!!!!!!!!!

 

사실 이 문제를 보고 CSS 적으로 접근할 생각은 아예 못했다. 어떻게든 Javascript로 해결해야 한다고 생각했는데... 문제의 해결법은 여러 방면으로 시도해봐야겠다!

 

감사합니다.... 면접관님....ㅎㅎ....