Step4. useReducer, edit, reset, checkMessage

 

지난번 check리스트

 

✔️ 시작 날짜는 가져오지만, 수정은 못하게 하기... 

✔️ reset 버튼 만들기

✔️ 셀 클릭했을때 참 잘했어요 같은 메세지창이랑, 취소했을 때 경고창 만들기

 ◻️ 30일 지났을 때 종료창 만들기 

 

 

1. useReducer

관리할 state가 많아질 땐 useReducer를 사용하는 편이 좋다고 해서 사용해 봤다. 

상태관리도 상태관리지만 개인적으론 action type을 정해서 state별로 관리하니깐 여기 저기 props로 안 해도 되고 좀 더 직관적이어서 더 편리했던거 같다. 

 

아 근데 엄청 삽질했다. react는 불변성이 엄청 중요한데... 

switch문 쓸 때 ...state, 하나 빠뜨려서...........undefined투성이었지.... 

 

• 초기 상태를 설정해준다. useState의 초기값 설정하는 것과 비슷

const initialState = {
  modal : false,
  initial : false,
  count: 0,
  checkState: 'check',
  checkMessage: false,
  test: 'test',
  challenge: {
    goal: '',
    startDate: '',
    endDate: '',
    dday: '',
    motivate: ''
  },
}

• 액션에 따른 스위치문 설정

export const TOGGLE_MODAL = 'TOGGLE_MODAL';
export const START_CHALLENGE = 'START_CHALLENGE';
export const CHECKED_CELL = 'CHECKED_CELL';
export const CANCELED_CELL = 'CANCELED_CELL';
export const EDIT_CHALLENGE = 'EDIT_CHALLENGE';
export const HIDE_MESSAGE = 'HIDE_MESSAGE';
export const RESET_CHALLENGE = 'RESET_CHALLENGE';


const reducer = (state, action) => {
  switch(action.type) {
    case TOGGLE_MODAL: {
      return { 
        ...state,
        modal: !state.modal,
      }
    }
    case START_CHALLENGE: 
      return {
        ...state,
        challenge : action.challenge,
        initial: true,
      }
    case CHECKED_CELL: 
      return {
        ...state,
        count: state.count + 1,
        checkMessage: true,
        checkState: 'check',
      }
    case CANCELED_CELL: 
      return {
        ...state,
        count: state.count - 1,
        checkMessage: true,
        checkState: 'cancel',
      }
    case EDIT_CHALLENGE: 
      return {
        ...state,
        challenge : action.challenge,
        modal: true,
      }
    case HIDE_MESSAGE: 
      return {
        ...state,
        checkMessage: false,
      }
    case RESET_CHALLENGE: 
      return {
        ...state,
        modal : false,
        initial : false,
        count: 0,
        checkState: '',
        checkMessage: false,
        test: 'test',
        challenge: {
          goal: '',
          startDate: '',
          endDate: '',
          dday: '',
          motivate: ''
        },
      }
    default :
      return state;
  }
}

• 액션을 디스패치 할 때마다 reducer함수가 실행되고 reducer 함수안에서 switch문으로 액션 타입별로 state를 바꿔준다. 

  const onClickReset = useCallback(() => {
    dispatch({ type: RESET_CHALLENGE })
    alert('정말로 reset하시겠습니까?');
  });

 

 

2. check 메세지

일단 셀을 클릭하면 체크 상태가 check로 바뀌면서 셀이 색칠된다. 그리고 하단에서 성공적으로 체크됐다는 메세지가 나오고, 다시 클릭하면 체크 상태가 cancel로 바뀌면서 셀이 배경색이 지워진다. 그리고 하단에서 성공적으로 취소 됐다는 메세지가 나온다. 

 

애니메이션 구현하는게 너~~~~~~무 오래걸렸다. 

useEffect를 사용해서 구현은 성공했지만, 애니메이션 중에는 클릭해도 동작하지 않도록 설정해야한다. 

 

 

3. 수정 기능

이것도 시간 오래걸렸는데 몇번이고 연습장에 그려보다가 이것도 useEffect로 구현했다. 

초기 입력값이 입력 되면 initial state가 true가 되는데 그때 그 입력값을 setState값으로 넣어주었다.

 

 useEffect(() => {
   if(initial){
     setGoal(challenge.goal);
     setMotivate(challenge.motivate);
     setStartDate(challenge.startDate);
   }
}, [challenge.goal, challenge.motivate, challenge.startDate])

대신 날짜는 disabled 속성을 사용하여 못 바꾸게 막아놨다. 

<input 
  type="date" 
  name="date"
  value={startDate}
  onChange={onChangeDate}
  min={getToday()}
  disabled={initial}
 />

 

 

4. reset버튼

reset버튼을 누르면 한 번 더 확인하는 메세지창을 일단 alert로 구현했는데, 갑자기 윈도우창이 나오니깐 뜬금없기도 하고 그래서 확인창을 만들어야겠다. 

 

 

그래서 이때까지의 결과물

useReducer을 처음 써보는거라 시간이 너~~~무 오래걸렸지만, 직접 써봐야 몸에 익지.....

 

 

 

 

 

체크리스트

◻️ reset 확인 메세지창 

◻️ 챌린지 완료 알림

◻️ 체크 메세지 애니메이션 겹치지 않게 하기

◻️ 최적화

◻️ context API 써볼지 말지 ... 고민좀 해보기

◻️ color 테마 욕심 내보기...

 

최종은..

◻️ github page로 배포하고,

◻️ README.md 작성하기~~~~~~~~~~~

 

기능 구현은 했어도 할게 아직도 어마어마하게 남았구나 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ