가을축제 팀과제 - uuid로 넣은 key값 리팩토링하기

1. 문제 발생

Main에 축제 리스트 데이터를 넣으면서 map을 돌리게 되었는데, map에 key 값이 필요했다. 급한대로 uuid()를 써서 key값을 넣었는데, 멘토링을 진행하다 key값을 uuid로 넣게 되면 리렌더링이 될 때 마다 uuid 값이 변경된다는 것을 알게 되었다.

uuid를 넣으면 다 해결되는 줄 알았지

2. 해결 방안

따라서 리팩토링을 진행하였다. 생각한 방법은 Festival을 api로 불러왔으니, 거기 값에 id를 더 집어넣어서 festival 마다 고유한 id 값을 만드는 것이었다. festival마다 고유한 id가 있으면 여러모로 편하기도 하고 리렌더링 될 때 마다 uuid가 변경되는 문제도 해결할 수 있을 듯 했다. 

festival에 어떻게 고유한 id를 넣는가? 일단 festival data를 살펴보기로 했다. 

axios를 통해 API Response를 불러오고, 불러온 response data를 setFestivalList를 이용해 festivalArray를 상태에 저장해주고 있다. 이 부분에서 id를 넣어주면 될 것 같다. 

const festivalsArray = response.data.response.body.items;
        if (festivalsArray && Array.isArray(festivalsArray)) {
          const createFestivalID = festivalList.map((festival) => {
            return { ...festival, id: uuid() };
          });
          setFestivalList(createFestivalID);

이렇게 넣었는데 id가 제대로 넣어지지 않았다. 왜 그런가 하고 찬찬히 보니 festivalList가 map을 돌리는 시점에서는 아직 빈 배열인 상태였다! 따라서 response data인 festivalArray를 이용해 map 함수를 돌렸다.

이렇게 코드를 짰다. 그런데 아까까지는 안 뜨던 

chunk-R6S4VRB5.js?v=8e010924:9129 Uncaught ReferenceError: kakao is not defined

이 오류가 떴다. 분명히 fastival을 건드리기 전에는 뜨지 않았던 오류이므로 코드를 잘못 짰나 싶어 console을 하나하나 찍어 보면서 찾아 봤는데 어디가 문제인지 도저히 모르겠었다. 결국 포기하고 다른 일을 하고, 다음날 튜터님에게 가져가려고 코드를 켰는데, 

???

잘 작동이 됐다! 아직까지도 왜 갑자기 작동이 되었는지 모르겠다. 아예 vscode를 껐다 켜서 그런 걸까? 그치만 어쨌든 되었으니 다행이다. 왜 개발자들이 기도하는지 조금 알 것 같다.