useEffect 내부 반복문 에러

문제

• 배열을 나누기 위해 코드를 구현하던 중에 로컬 브라우저에서 아래와 같은 현상이 발생하였다.

문제 원인

• 한가지 한가지씩 주석을 처리하며 확인하던 중 useEffect 안의 for문이 에러의 원인이었다.

 

(당시 코드)

 useEffect(() => {
 // 페이지 보다 수가 작은 4개 요소를 담는 배열
    const pre = [];
    for (let i = page - 4; i < page; i + 1) {
      if (i < 0) {
        pre.push(data[data.length + i]);
      } else {
        pre.push(data[i]);
      }
    }
    setPrevDatas(pre);
// 현재 페이지
    setSelectDatas(data[page]);
// 페이지 보다 수가 큰 4개 요소를 담는 배열
    const next = [];
    for (let i = page + 1; i <= page + 4; i + 1) {
      if (data.length < i) {
        next.push(data[i - data.length]);
      } else {
        next.push(data[i]);
      }
    }
    setNextDatas(next);
  }, [data, page]);

 

문제 해결

• for문을 사용하지 않고 구현할 수 있는 방법이 있을까 생각하던 도중 페이지를 기준으로 작은 페이지와 큰 페이지를 잘라내면 되므로 조건문과 slice()를 사용하기로 했다.

 

useEffect(() => {
    const pre = data.slice(page - 4);

    if (pre.length < 4) {
      pre.push(...data.slice(0, 4 - pre.length));
    }

    setPrevDatas(pre);

    setSelectDatas(data[page]);

    const next = data.slice(page + 1, page + 5);

    if (next.length < 4) {
      next.push(...data.slice(0, 4 - next.length));
    }

    setNextDatas(next);
  }, [data, page]);

결과적으로 성공했다! 데이터가 원하는 형태로 잘 나왔다!