문제 : 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);
};