4일 차

서버 데이터 요청이 2번씩 되는 버그가 있었다.
한참을 찾다가 자료형이 달라서 생긴 문제라는 것을 발견했다.

editFrame컴포넌트의 setState함수에서 현재 id와 다음 id를 비교해 다를 시 서버 요청를 하도록 코드를 짰다. 서버에서 불러진 데이터를 this.state에 업데이트하고 다시 setState를 할 경우 현재 id와 다음 id가 같아지게 되어 서버 요청을 하지 않고 바로 자식 컴포넌트를 업데이트 할 수 있게 된다.

하지만 서버에 요청할 때 넣은 id는 텍스트이고, 서버에서 불러진 데이터의 id는 숫자였다. 그렇기에 다시 setState를 했을 때 === 연산자에 의해 flase가 나오게 되어 또 서버 요청을 또 하게 된 것이었다.

editFrame컴포넌트에 다음 상태를 전달할 때 숫자로 변환하는 방법으로 해결했다.
id가 'new'인 경우는 숫자로 변환할 수 없으므로, isNaN함수로 구별해주었다.

editFrame.setState({
        ...editFrame.state,
        id: isNaN(pageId) ? pageId : parseInt(pageId),
      });

평소에 자료형을 크게 신경쓰지 않았었는데 이번에 크게 헤매고나서
자료형을 정확하게 설정해야 하는 것의 중요성을 느꼈다..