1. 코테 문제 풀기 (고득점 kit)

코딩테스트 연습 - 폰켓몬

  1. 사진 업로드 할때 오류에 해당하는 내용을 스낵바로 표현해주고 있는데, 스낵바가 내려갈때 찰나에 텍스트가 사라지는 버그를 발견하였다.
    1. 글로벌 스낵바는 총 3개의 컴포넌트를 통해 출력되고 있다.
    2. <GlobalSnackbar>, <SnackBar> : 실제 스낵바 컴포넌트 그려줌, <useSnackBar> : recoil 상태 변경

문제 : hideSnackBar 함수에서 하는일이 setSnackBar(null) 로 만드는것인데, 이것이

useEffect(() => {
    let timer = setTimeout(() => {
      hideSnackBar(null);
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
  }, [snackBarState]);

3초후에 컴포넌트가 닫힐때, null로 만들면서 snackBar 컴포넌트가 props로 받았던( snackBarState, snackBarType, snackBarMessage)가 다 null로 바뀌면서 텍스트가 없어져버리는 것….

recoilState에서 default : null이 아닌, snackBar 정보들을 default 값으로 바꿔주고, hideSnackBar를 snackBarState만 false로 바꿔주는것으로 변경했다.

기존 코드

import { atom } from 'recoil';
import { SnackBarProps } from '../@types';

export const snackBarState = atom<SnackBarProps | null>({
  key: 'snackBarstate',
  default: null
});

수정 코드

import { atom } from 'recoil';
import { SnackBarProps } from '../@types';

export const snackBarState = atom<SnackBarProps | null>({
  key: 'snackBarstate',
  default: {
    snackBarState: false,
    snackBarType: 'NEGATIVE',
    snackBarMessage: '',
  },
});

기존 코드

// useSnackBar.ts

export default function useSnackBar() {
  const [snackBar, setSnackBar] = useRecoilState(snackBarState);
  // showSnack 함수는 인자를 받아서, 리코일 state를 바꾸어준다.
  const showSnackBar = (param: SnackBarProps) => {
    setSnackBar(param);
  };

  const hideSnackBar = (params: SnackBarProps) => {
    setSnackBar(null);
  };