[React project] EP02. 순조로울 줄 알았던 항해의 첫 장애물 - missing dependency

저번에 mock데이터들을 map메소드를 통해 가공한 애들을 들을 출력하는 것까지 완성했었다. 얘네들을 dessertList라는 배열에 담기로 했는데, 이 때 생각할 거리가 좀 있어서 다음과 같이 처리하기로 했다.

 

1. 일단 디저트들을 좀 섞는 게 어떤지? 

: 그냥 이대로 쓰면 매번 내 사이트를 들어올 때마다 같은 구성으로 16강이 진행되는(예를 들면 처음엔 마카롱은 항상 다쿠아즈와 경쟁하는) 문제가 있다. 따라서 이를 섞어야 할 필요가 있었다. 0이상 1미만의 난수를 랜덤 생성하는 Math.random과 콜백함수의 리턴값이 양수/음수/0인지를 보고 정렬하는 sort()를 이용해서

dessertList.sort(() => {return Math.random() - 0.5});

이렇게 할 수도 있었지만, 이 방법은 좋지 않다고 한다. 늘 고른? 분포를 보이진 않는 모양. 그러던 와중 피셔-예이츠 셔플?이 좋다고 해서 그 방식을 사용해 섞기로 했다.

// 피셔 - 예이츠 셔플(배열 섞는 알고리즘)
function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        // destructuring 문법
        [array[i], array[j]] = [array[j], array[i]];
    }
}

 

2. 16개 전부다 한꺼번에 출력하는게 아니라 2개씩 보여주고 싶다

당연히 16강이고, 2개씩 보이면서 하나씩 고르는 걸 내가 원했으니까..이걸 어떻게 할까 고민하다가, selectIndex라는 state를 만들어

 

1) dessertList의 selectIndex번째 디저트와 selectIndex + 1번째 디저트를 보여줌

2) 사용자가 '선택하기' 버튼을 누르면 selectIndex값이 2만큼 증가!

 

하는 식으로 만들기로 했다. 

그래서 DessertItem 컴포넌트에 선택하기 버튼을 추가해서 만들기로 하고, 이를 위해 App.js에서 selectIndex를 + 2만큼 증가해주는 메소드를 만든 후 이를 DessertItem의 prop으로 보내 onClick속성으로 활용키로 했다. 좋아좋아 아주 순조로워~~

 

정리하자면

 

mock데이터를 가공해 각각의 요소들을 JSX요소들로 만들고 이를 dessertList라는 배열에 담는 거였는데, 우선 JSX요소들로 만들어주기 전에 섞어줄거임(mock데이터 배열의 요소들을). 그리고 얘네들을 selectIndex라는 state를 활용해 2개씩 보여줄 예정이니까, mock데이터들을 섞은 후에 map메소드로 JSX요소들(정확히는 DessertItem 컴포넌트들)로 가공해줄 때 'selectIndex를 2씩 증가해주는 메소드를 onClick속성으로 갖는 버튼'을 갖게 한다!!

 

즉 웹사이트를 처음 열자마자 mock데이터에서 갖고 온 애들을 섞고, 버튼까지 딸린 컴포넌트들로 가공한 애들을 dessertList에 담아둬야 함. 근데 옛날에 useEffect를 사용하면 처음 렌더링될때만 어떤 동작을 할 수 있다고 어렴풋이 들었던 기억이 나서, 다음과 같이 useEffect를 이용하게 됐다.

console.log()는 그냥 테스트용으로 찍어보던 거라 무시바람..암튼 이렇게하면 아무 문제없을 줄 알았다.

 

그런데 오류가 났다.

React Hook useEffect has a missing dependency: 'selectNextDessert'. Either include it or remove the dependency array

 

selectNextDessert가 selectIndex라는 state값을 늘려주는 메소드였는데, 이거 땜에 문제가 생긴다고 한다.  useEffect의 두 번째 파라미터인 빈 배열 안에 selectIndex를 넣어주면 오류가 안 나긴 하지만 그렇게되면 selectIndex가 늘어날 때마다 shuffle이 계속 실행되는 불상사가 발생..[]자체를 없애면 렌더링될때마다 useEffect의 콜백함수가 실행되고..

 

구글링도 열심히 해보고 했지만 도무지 모르겠다. okky커뮤니티에도 상세하게 질문을 남겼지만 답변이 달리지 않았다. 내가 완전 기본적인 내용을 놓치고 있는 듯한..

---

# 뭐 어떻게든 해결은 했다만..

결국 통 모르겠으니, 특단의 조치를 내렸다. 선택하기 버튼 자체를 분리해서 만들기로 한 것! 이렇게하니까 오류는 안 생기긴 한다..

나중에 공부를 계속하며 해결될 문제라고 생각된다..화이팅하자..