api 호출이 두번 안 되게 하는 방법?

React
1

Select 에서 option item을 선택하면 그에 맞는 데이터를 가져 오려 하고 있습니다.

useEffect을 이용해서 첫번째 데이터는 자동 선택 되고 onChange 되면 다시 api 호출이 되는 방식으로

이해하고 코드를 작성했습니다. 예를 들어

const transform2DropdownForm = list => {
  const result = list.map(data => ({
    key: data.post_series_record_id,
    value: data.post_series_record_id,
    text: `${data.test_date} (${data.name})`,
    name: data.name,
  }));
  return result;
};
useEffect(() => {
    if (postSeq.length > 0) {
      const transformed = transform2DropdownForm(postSeq);
      
      setExamSeqList(transformed);

      // 첫번째 회차 선택
      setSelectedExamSeq(transformed[0]);
    
     //  id에 맞는 데이터 가져온다
     getPostData({ post_series_record_id: transformed[0].value });
      
    }
   
  }, [postSeq]);

  function onChnagePostSeqDropdown(e, data) {
    
    setSelectedPostSeq({ value: data.value });
    
    getPostData({ post_series_record_id: data.value });
  }

요런 방식으로 작성 했는데 api 호출이 두번 되는 건 왜 그런건가요?

너무 허접한 질문이지만 부족한 부분 알려주시면 감사하겠습니다…ㅠㅠ

2

이 코드들에는 여러 함수들이(setSelectedPostSeq, getPostData 등) 어떤 함수인지 알수 없는상태라 어떤 상태인지 파악이 불가능하네요. 좀 더 자세한 설명과 코드를 올려주시면 답변을 찾는데 도움이 될겁니다. :slight_smile:

3

너무 늦었지만 그냥 지나가다가 글 남겨봐요…
두번이상 되었다면 두번이상 set 이벤트가 발생했다는 것이오니
예상컨데

  1. postSeq : 값이 api호출후 변경된 경우
  2. setExamSeqList(transformed);
    setSelectedExamSeq(transformed[0]);
    위 코드가 변수이고 useState으로 초기화값으로 정의된 경우라면 setExamSeqList,setSelectedExamSeq 처리 할때마다 이를 포함한 해당 클래스(컴포넌트)가 화면에 전달하기위해 두번호출될 경우

#useState, useEffect…등등으로 화면(브라우져)에 값을 전달되는 코드가 있는경우 이를 호출 또는 실행할 때마다 해당 화면을 그리는 클래스가 호출될 것이며 호출되는 클래스내에 api처리 함수가 있다면 만찬가지로 호출 횟수만큼 호출될 것입니다. 단, 해당 api함수내에 useEffect가 있거나 이와 비슷한 처리를 하는 함수가 존재한다면 api함수호출시 postSeq값을 비교하도록 했을 것이며 변경이 없다면 호출만 할 뿐 서버에 요청은 없을 겁니다. 그러나 불필요한 함수 호출을 막아야 하니 useEffect내에는 꼭 화면에 뿌릴 데이터가 아니라면 api처리가 종료된후 처리하도록 코딩하는 것이 좋을 듯 합니다. 방법은 여러가지이니 해당 프로젝트에 맞게 …