리액트에서 발견한 문제점(22.10.25TIL)

어제 정적인 리액트 컴포넌트를 만들고 props로 필요한 데이터를 전달하는데까지 구현했다. 오늘은 각각의 컴포넌트에 필요한 state를 분류하고 useState를 사용해 관리해주었다. 짜고보니 부족한점이 보였다.

state와 핸들러가 너무 많다.

루트컴포넌트인 App.js의 state와 핸들러에 관련된 코드만 30줄 가까이 되어서 JSX요소를 리턴하는 부분은 눈에 들어오지 않았다. 컴포넌트의 깊이가 깊지 않아서 전부 루트 컴포넌트에 state가 몰리면서 발생한 문제인 것 같다. 관심사의 분리가 잘 되지 않는것 같은 기분이 들어서 state와 핸들러만 관리해주는 다른 컴포넌트로 분리해서 사용할 수 있나? 하는 생각이 들었다.

 

  핸들러와 state에 관련된 코드들
  
  const [amount, setAmount] = useState(100000);
  const [friends, setFriends] = useState([]);
  const [transactions, setTransactions] = useState([]);

  const recharge = () => {
    setAmount(amount + 100000);
  };

  const addFriend = () => {
    const lastestFriend = friends[friends.length - 1];
    const id = (lastestFriend?.id || 0) + 1;

    setFriends([
      ...friends,
  .
  .
  .

 

테스터블하지 않다

송금 기능을 구현하면서 form을 이용하였는데, submit이벤트를 테스트에서 어떻게 발생시켜야 할 지 고민중이다. 

    컴포넌트 코드
	  <form onSubmit={handleSubmit(handleTransfer)}>
        <div>
          <label htmlFor="account">보낼 계좌</label>
          <input id="account" {...register('account')} />
        </div>
        <div>
          <label htmlFor="transferAmount">보낼 금액</label>
          <input id="transferAmount" {...register('transferAmount')} />
        </div>
        <button type="submit">보내기</button>
      </form>

 

마지막 줄 테스트코드에서 호출이 되었는지 체크하니 호출되지 않았다고 나온다. 아마도 submit자체가 테스트에서 발생하지 않은 것 같다.

fireEvent.submit으로 버튼에 submit이벤트 발생을 시도해봤는데 마찬가지로 발생하지 않는다.

 

  테스트 코드 -> 마지막 줄 transfer가 call된지 확인하면 에러 발생. submit자체가 발생하지 않는듯 하다.

  const transfer = jest.fn();
  const account = '302-1066-0044-51';
  const amount = 50000;
  
  fireEvent.change(screen.getByLabelText('보낼 계좌'), {
    target: { value: account },
  });

  fireEvent.change(screen.getByLabelText('보낼 금액'), {
    target: { value: amount },
  });

  fireEvent.click(screen.getByText('보내기'));

  expect(transfer).toBeCalled();

 

아직 fireEvent에 익숙하지 않아서 테스트를 진행하지 못하는 것 같다. submit이벤트를 발생시킬 수 있는 방법을 찾아봐야 할 것 같다.

State와 핸들러도 분리해서 더 깔끔한 구조를 만들 수 있는지 한 번 고민해보도록 하자.

액션플랜

1. fireEvent에서 submit을 발생시키는 방법 더 조사해보기

2. State와 핸들러를 분리해서 더 깔끔한 루트 컴포넌트를 만들 수 있는 방법 고민해보기