[Wecode 51일차] componentDidUpdate 등 실수사항

1. componentDidUpdate에서 setState

componentDidUpdate에서 setState는 주의해서 사용해야한다. 무한 루프가 발생한다.

componentDidUpdate는 인자값을 previousProps, previousState 두개를 받고,

두개중 하나가 변경되었을때 실행된다. 

나는 콤보박스로 지역명이 바뀌었을때 기준으로 값을 불러오게 작성했다.

시가 먼저 불러와지면 군구에서 선택할 수 있게 했다.

우선 콘솔로그로 값을찍어확인해보자.

console.log("componentDidUpdate props:", previousProps, this.props);
console.log("componentDidUpdate state:", previousState, this.state);

componentDidUpdate에서 무한 루프가 실행되지 않게하려면, 이전 props값이나 state값이 현재 props또는 State값이 일치하지 않아야 랜더링이 계속 실행되지 않는다.

시를 선택하기 전까지 시의 번호(시를 선택하면 시의  id값을 state에 cityNum 으로 저장하고있다)는 null이고, 시를 선택하면 cityNum값이 state안에 생성된다.

cityNum값에 따라 군/구 내용을 랜더링하므로, 어떤 값을 기준으로 변하는지를 고려하여 코드를 작성한다.

if (cityNum && previousState.cityNum !== this.state.cityNum) {
      let getData = await fetch(ADDRESS + "store/gungu/" + cityNum);
      let gungu = await getData.json();

      this.setState({
        gunguInfo: gungu
      });
    }

마찬가지로 지점/위치는 군/구가 먼저 나와야 하므로 위와 같이 군구의 번호값 기준으로 if 문을 작성하여, 무한루프를 방지한다.

  if (gunguNum && previousState.gunguNum !== this.state.gunguNum) {
      console.log("지점 불러오기");
      // const { gunguNum } = this.state;
      let getData = await fetch(ADDRESS + "store/shop/" + gunguNum);
      let getLocation = await getData.json();
      this.setState({
        locationInfo: getLocation
      });
    }

2. 컴포넌트 안에 속성 props

<SelectBox
  selectName="cityNum"
  locationList={this.state.cityInfo}
  handleSelectedChange={this.handleSelectedChange}
/>
<SelectBox
  selectName="cityNum"
  handleSelectedChange={this.handleSelectedChange}
/>

속성을 props로 주었을 경우,  다필요한 값인데 어디는 다보내고, 어디는 속성을 하나 없이 보내면..?

위와같이 보낼경우 에러가난다..

잦은 실수할 수 있으니 주의하자!!

 

3. async방법으로 호출했는데 왜 데이터가 안가지??

      this.sendAjax = async () => {
        let reqData = await fetch(ADDRESS + "account/employee", sendData);
        let getMessage = await reqData.json();
        console.log(getMessage); //왜 이늠은 안가지?
        if (getMessage.message === "SUCCESS") {
          alert("회원가입을 축하드립니다.");
          this.props.history.push("/admin/login");
        }
      };

선언만하고 호출안했으니 안가지..

this.sendAjax();

기업협업가서 실수 금지.