코드숨 React 8기 - 4주차 회고

Facts(학습내용, 사실/ 객관)

학습내용

1.  리덕스

2. Container & Presentation 패턴

2. 리덕스 테스트

 

사실 / 객관

1. 과제 1을 간신히 했지만 과제2는 하지 못했다 ㅠㅠ 

2. 회사 워크샵 및 가족 일정 등 유달리 일정이 많았던 주간었다.

---

Feelings(느낌,주관)

1.  아직 테스트코드가 쉽지 않다! 

이번 주는 리덕스를 배웠고 리덕스 테스트 방법에 대해 배웠는데 강의 내용도 길어 강의를 온전히 이해하는 데만 

다른 주보다 많은 시간을 할애했다.  

또한 테스트 코드가 익숙하지 않아 테스트코드와 함께 기능을 구현해야 하는데 기능을 먼저 다 구현한 후에 테스트 코드를 

작성하려는 습관이 남아 있는 것 같다. 

 

2. 시간 관리를  못해 아쉽다.

물론 이번 주의 일정이 많았던 건 사실이었다. 하지만 그걸 염두해두고 미리 과제를 작성했어야 했는데 많이 아쉽다.

 

---

Findings(배운점)

 1. 리덕스 

- Flux Architecture의 개념을 알게 되었다. 

- Container & Presentation 패턴에 대해 알게 되었다. 

 

2. useSlector & useDispatch 함수를 테스트코드에서 사용하는 방법을 알게 되었다.

 1) 가짜 함수들을 react-redux.js 파일에 export 해준다. 

// __mocks__/react-redux.js

export const useSelector = jest.fn();
export const useDispatch = jest.fn();

2) 테스트 파일에 `jest.mock('react-redux')를 사용하면 위에 만든 파일을 찾아 사용할 수 있다. 

import { useSelector } from 'react-redux';

jest.mock('react-redux');

3. useSelector.mockImplementation을 사용해서 store를 조작할 수 있다. 

  useSelector.mockImplementation((selector) => selector({
    taskTitle: 'New Title',
  }));

4. useDispatch.mockImplementation을 사용해서 dispatch 함수도 테스트 가능하다. 

  useDispatch.mockImplementation(() => dispatch);
  
 const changedTaskTile = '변경된 타이틀';
  fireEvent.change(getByLabelText('할 일'), {
    target: { value: changedTaskTile },
  });

  expect(dispatch).toBeCalledWith(updateTaskTitle(changedTaskTile));

---

Affirmation(자기 선언, 앞으로 할 것)

1. 4주차 과제 2 꼭 마무리 하기

2. 투자한 만큼 성장한다는 생각으로 미루지 않기