react) setState 콜백

클래스형 컴포넌트를 사용하게되면 this.state 값을 주며
setState를 이용하여 값을 변경하게 된다.
프로젝트를 진행하면서 페이지 넘버링.
제품 페이지를 숫자넘버링을 클릭하면 이동해야 하는 상황의 코드 구현을 하게 되었다.
이부분!
화살표를 클릭하면 좌우로 이동하고 숫자를 누를때 해당 페이지를 보여준다.
제품이 많을 경우 보여지는 값인데 라우트에서 :id 형식으로 값을 변경해줘도 되었지만 백엔드팀에서 페이지 하나하나 마다 주소를 주었다.
주소도 다행히도 page= 1 ,2 ,3 이렇게 증가하는 형식이라서
숫자를 클릭할때는 클릭한 인덱스값을 전달해주었고
좌우로 이동할때는 +- 1 을 해주는 형식으로 코드를 짜게 되었다.

처음에 함수를 만들어서 setstate값으로 좌우 +- 를 하여 값을 전달해주었다.
예 ) fetch(http://10.58.6.28:8000/products?page=${this.state.num + 1},
이런식으로 값을 조정했는데 setstate를 이용하고 바로 fetch를 사용해서 값을 변화 시켰는데 좌우로 이동시에 좌로 이동하다가 우로 가면
한번 밀리고 진행하는 형식의 오류가 발생되었다.
예) 1->2->3-> 이렇게 진행은 되었는데 좌로 이동하다가 갑자기 우로 이동하면
1-2->-3->3->2-> 이런식으로 한번 멈칫 하면서 이동이 되었다.

원인을 못찾아서 하루이틀 정도 코드를 보며 엄청씨름했는데 멘토님께 도움을 요청해서 쉽게 해결할수 있었다.

결론적으로 말하면 setstate함수의 콜백함수를 이용하는 것이었다.
setstate함수를 사용하면 대부분 인자를 한개만 사용하게 된다 .

setstate({state:nextstate}) 이런식으로 변화의 값만 입력하여서 사용하게 되는데 setstate는 인자를 두개 받을수 있다.
setState({},()=>{}) 이런식으로 콜백함수라서 함수를 받는다.
console.log 를 찍어서 바로 확인하고 싶을 때 바로 뒤의 인자로 콘솔로그를 넣어준다.

내원인은 결국 setstate로 값을 변경은 시켜줬는데 변경된 값 적용은 안되어서 이전값으로 렌더가 되었던 것이였다.
setstate콜백함수를 이용하면 변경시키고 바로 값을 적용시킬수 있다.

그래서 setstate 값 두번째 인자로 fetch함수를 넣어서 바로 바로 적용될수 있도록 하였다. 간단!

수정전의 코드이다. setstate다음으로 fetch함수를 사용하였다.

  clickNum = number => {
    const newArr = Array(PAGENUM.length).fill(false);
    this.setState(
      {
        isButtonSelect: newArr,
        num: this.state.num + number,
      },
      // () => {
        );
        fetch(`http://10.58.6.28:8000/products?page=${this.state.num + 1}`, {
          method: 'GET',
        })
          .then(res => res.json())
          .then(data => {
            this.setState({
              get: data.RESULT,
            });
          });
        newArr[this.state.num] = true;
      }
  };

수정후 코드 이다.

clickNum = number => {
    const newArr = Array(PAGENUM.length).fill(false);
    this.setState(
      {
        isButtonSelect: newArr,
        num: this.state.num + number,
      },
      () => {
        fetch(`http://10.58.6.28:8000/products?page=${this.state.num + 1}`, {
          method: 'GET',
        })
          .then(res => res.json())
          .then(data => {
            this.setState({
              get: data.RESULT,
            });
          });
        newArr[this.state.num] = true;
      }
    );
  };

두번째 인자로 fetch함수를 넣어주었다.
이러한 간단한 방법으로 문제가 해결되서 허탈하기도 하였지만 신기하기도 하였다.