[React Daum지도 API] 팝업 컴포넌트 및 다음 지도 api사용 시 뜨는 Warning 에러 해결

 

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

회원 가입시 회원의 주소를 입력 받아야 한다.

주소찾기 버튼이나 상세주소 입력 란을 클릭하면 이렇게 다음 지도 API가 뜨도록 해놨음

문제는 얘를 입력하고 창이 닫히고 나면??

이렇게 보기 싫은 빨간 에러가 뜬다는 것...

여기서 쓰이는 것만 코드 뽑아보쟈...

function Join({history}){

    const [open, setOpen] = useState(false);    //다음 주소api를 팝업처럼 관리하기 위함
    
      // cleanup function을 이용
      useEffect(async () => {
            //useState를 true나 false로 지정하면 이렇게 기본 값 설정해줘야 콘솔창에 에러안나나 보다
            setOpen(false);   
    }, []);

    //daum 주소검색 API 팝업 띄운 후 입력된 값 받아오기
    let daumHandler = (data) => {
        setInputs({...inputs, address: data.fullAddress, zonecode : data.zonecode});
        setOpen(false);
    }
    
     return(
        <div>
          <FormGroup row>
              <Label sm={3}>
                주소<strong style={{color:"red"}}>＊</strong> <br/>
                <Button color="success" onClick={() => { setOpen(true);}} size="sm">주소찾기</Button>
              </Label>
              <Col lg={9} className={"text-left"}>
                {
                  (inputs.zonecode === ""
                  ? <span className="text-muted"> 주소를 찾아주세요. </span>
                  : <> {inputs.zonecode} <br/> {inputs.address} </>)
                }
              	<Input type="text" name="detailAddress" style={{width:"250px"}} placeholder="상세 주소 입력"
                  onChange={onTyping}
                  onClick={()=> {
                  if(!inputs.zonecode && !inputs.address) setOpen(true);
                  }}
                  value={inputs.detailAddress} />
              </Col>
            </FormGroup>{/*주소 FormGroup*/}
            
            //여기 아래에서 open을 통해 daum api 열고 닫음
        	{ open ? <DaumPostcodeAPI handler={daumHandler}/> : null } <br/>
        </div>
    );
}

export default Join;

open이라는 state를 만들어서 true와 false를 통해 daum api 컴포넌트를 띄울 지 말지 구분하게 된다.

그리고 handler라는 함수를 만들어서 daum api에서 작업이 끝날 때 open state를 false로 변경하게 하여 현재 화면에서 보이지 않게 처리하였다.

 

useEffect를 통해 cleanup을 시켜줬다. 처음에는 문제가 없었다. 에러 메시지도 안뜨고 좋았음...

근데 기존에 주소찾기 버튼을 눌러야 다음 api가 뜨도록 했었을 땐 괜찮았는데

 

이번에 리팩토링을 하면서 상세 주소 입력 input창을 클릭해도 다음 지도api창이 뜨도록 변경하였다.

그랬더니 또 다시 해당 에러가 뜨는게 아닌가ㅠㅠ 여러가지 방법을 시도했음에도 불구하고 계속 에러가 떠서 반쯤 포기하고 있었을 때 https://sustainable-dev.tistory.com/58 이분의 글을 발견하였다...

 

나와 동일하게 상위 컴포넌트에서 다음 컴포넌트를 호출한 뒤, 상위 컴포넌트에서 얘를 닫아주기 때문에

이렇게 (다음에서 제공하는) autoClose 설정을 해주면 얘에 대한 걸 실행해주려고 할 때 호출 된 곳에서 컴포넌트가 이미 닫혔기 때문에 에러가 난다는 그런 내용이였다.

(내가 이해한게 맞나 모르겠음..ㅋㅋㅋ)

암튼 요로코롬 주석처리를 해버리규나니까 정말로 에러가 안떴다!!!

---

결론: daum api에서 autoClose만 하든지, 호출한 상위 컴포넌트에서 닫아주든지 하나만 하쟈