알람 이벤트 만들기

특정 이벤트를 수행하였을때마다 결과를 알려주는 알림기능을 구현하였다.
custom hook으로 따로 만들어서 재사용가능하게 만들어보았다.

1. 애니메이션 만들기

// TopAlarm.tsx
import React, { ReactElement } from 'react';
import * as S from './style';

const TopAlarm = (): ReactElement => {
  const pop = true;
  
  return (
    <S.Container pop={pop}>
      <p>{content}</p>
    </S.Container>
  );
};

export default TopAlarm;

//style.ts
import Styled from 'styled-components';

interface ContainerProps {
  pop: boolean;
}
export const Container = Styled.div<ContainerProps>`
  position:absolute;
  left:50%;
  height:50px;
  line-height:50px;
  transform:translate(-50%,${({ pop }) => (pop ? '0' : ' -50px')});
  font-size: 14px;
  color: #06880d;
  transition:.5s;
`;

pop이라는 boolean값으로 true시에 상단에서 내려오고 false로 바뀔경우 다시 상단으로 사라지는 컴포넌트를 따로 만들었다.

2. 컴포넌트 준비하기

// App.tsx
const App = (): ReactElement => {
  return (
    <Provider store={store}>
      <HelmetProvider>
        <ThemeProvider theme={theme}>
          <Layout>
            <TopAlarm /> //*
            <GlobalStyle />
            <RootPage />
          </Layout>
        </ThemeProvider>
      </HelmetProvider>
    </Provider>
  );
};

export default App;

TopAlarm 컴포넌트를 App.tsx의 태그로 넣어서 항상 존재하게 만든다.

3. redux로 상태관리하기

// store/popAlarmReducer.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState = {
  pop: false,
  content: '',
};

const popAlarm = createSlice({
  name: 'pop-alarm',
  initialState,
  reducers: {
    popAlarmReducer: (state, { payload }: PayloadAction<typeof initialState>) => payload,
  },
});

export const { popAlarmReducer } = popAlarm.actions;
export default popAlarm.reducer;

//rootReducer.ts
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import popAlarm from './popAlarmReducer';

const reducer = combineReducers({
  popAlarm,
});

const store = configureStore({
  reducer,
  middleware: [logger],
});

export default store;

export type ReducerType = ReturnType<typeof reducer>;
export type AppDispatch = typeof store.dispatch;

이제 react-reducer로 언제든지 popAlarm을 컨트롤 할수 있다.

4. 커스텀훅 만들기

//usePopAlarm.ts
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../stores/rootReducer';
import { popAlarmReducer } from '../stores/popAlarmReducer';

const usePopAlarm = (): ((content: string) => void)[] => {
  const dispatch = useDispatch<AppDispatch>();

  const showPopAlarm = (content: string) => {
    dispatch(popAlarmReducer({ pop: true, content }));
    setTimeout(() => {
      dispatch(popAlarmReducer({ pop: false, content }));
    }, 2000);
  };

  return [showPopAlarm];
};

export default usePopAlarm;

setTimeout과 react-redux를 사용하여 2초간 true로 머물다가 false로 바꾸어 알람이 다시 상단으로 사라지게 만들어 보았다.

5. 사용해보기

const Test = (): ReactElement => {
  const [showPopAlarm] = usePopAlarm();
  
  const onClick = () => {
    showPopAlarm('클릭하였습니다.');
  }
  
  return (
    <div onClick={onClick}>클릭</div>
  );
};

export default Test;

이렇게 커스텀훅으로 만들면 재사용할때 매우 간단히 사용가능하다.