2021-09-07 TIL

Facts (사실, 객관)

• 지난 과제 복습을 하면서 Redux를 반복적으로 연습하고 있다.

Feelings (느낌, 주관)

• Redux는 역시 쉽지 않았다. 더 열심히 해야겠다.

Findings (배운 점)

useSelector 함수 테스트 코드에서 사용하기

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

// __mocks__/react-redux.js

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

테스트 케이스에서 아래와같이 jest.mock('react-redux')를 사용하면 위에서 만든 react-redux파일을 찾아 가져온다.

import { useSelector } from 'react-redux';

jest.mock('react-redux');
다음으로 useSelector mock 함수를 조작해준다.

  const tasks = [
    { id: 1, title: 'Task-1' },
    { id: 2, title: 'Task-2' },
  ];

  useSelector.mockImplementation((selector) => selector({
    tasks,
  }));

이렇게하면 useSelector 함수가 조작되고 테스트데이터를 사용해 테스트가 가능해진다.

테스트하려는 App 컴포넌트는 아래와같이 생겼는데, 테스트케이스가 실행되면 useSelector는 위에서 만들어준 react-redux 파일에서 가져오기때문에 useSelector 함수의 state에는 테스트케이스에서 넣어준 tasks가 담기게된다.

// App.js
import { useDispatch, useSelector } from 'react-redux';

const { taskTitle, tasks } = useSelector((state) => ({
  taskTitle: state.taskTitle,
  tasks: state.tasks,
}));
// 아래의 테스트는 통과된다.

expect(getByText('Task-1')).not.toBeNull();
- 가짜 함수들을 react-

useEffect 작동 조건

1. 페이지가 처음 렌더링 되고 난 후 useEffect 무조건!! 한번 실행됩니다.
2. useEffect에 배열로 지정한 useState의 값이 변경되면 실행되게 됩니다.

즉 useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수입니다.

useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있습니다.

useEffect 사용 방법

useEffect를 사용하는 방법은 총 3가지 정도로, 압축해볼 수 있습니다.

useEffect(()=> {});
// Or
useEffect(()=> {},[]);
// Or
const [name, setName] = useState();
useEffect(()=> {},[name]);

첫 번째 : useEffect의 가장 기본 형태이지만, 이러한 형태를 거의 사용하지는 않습니다.

Dependency가 없기 때문에 렌더링 할 때 한번 그리고 어떠한 작은 요소라도 변화한다면 시시때때로 useEffect가 발동되어 불필요한 실행이 너무 많아집니다.

두 번째 : useEffect를 렌더링 후 단 한 번만 실행하고 싶을 때 사용하는 방법입니다. 콜백 함수 뒤에 배열을 나타내는 대괄호가 붙어있습니다.

이곳에 Dependency를 지정합니다.
하지만 아무 변수나 값 없이 대괄호만 있다면, 이 useEffect는 렌더링 후 단 한 번만 실행되고 다시는 실행되지 않습니다.

세 번째 : useEffect를 렌더링 후 한번, 그리고 배열 안 변수의 값이 변할 때마다 실행하는 코드입니다. 이렇게 Dependency를 지정해주어 지정된 변수의 값이 변했을 때만, 실행되게 됩니다.

#### react-redux 플로우의 이해

참고

Affirmation(자기 선언)

• 하루하루 꾸준히 공부하자