함수형 리액트 데이터 통신

나는 함수형 리액트 프로젝트를 진행할 때, fetch()로 서버와 통신했음
그런데 항상?
페이지에 초기 접근시에 렌더링이 두 번 일어났음.
성능의 저하가 우려되고 사용성이 좋지 못할 수 있는데
드디어 발견 견발 끝까지 봐야됨

    useEffect( ()=>{
      
       fetch(config.SEARCH_CALLBACK_LIST+'/'+userId+'/'+cardId, {
        headers: {
          'Content-Type':'application/json',
          'Accept':'application/json'
        }
      })
       .then (res=>{
         return res.json();
       })
      .then (data=> {
        console.log('이거맞니?',data)
        //setCurData(data[0])
      })

    },[userId, cardId])

위 코드는 초기렌더링 이후에, id state가 update 되면 해당 값을 통해 통신했는데
curData 업데이트 후 초기화돼서 다시 undefined 가 되었음

       .then (res=>{
         return res.json();
       })
       .then (data=> {
        console.log('이거맞니?',data)
        setCurData(data[0])
      })

그건 바로 .then 을 두 번 받은 이 부분 때문이;다.
위에 then 지워주니까 괜찮아짐

ㅎㅎ

인 줄 알았는데!!!!!!!!!!
아님!!!!!!!!

useEffect( ()=>{
      
       fetch(config.SEARCH_CALLBACK_LIST+'/'+userId+'/'+cardId, {
        headers: {
          'Content-Type':'application/json',
          'Accept':'application/json'
        }
      })
       .then (res=>{
         return res.json();
       })
      .then (data=> {
        return (
          setCurData(data)
      )
      })

    },[userId, cardId])

return 이 빠진거였음 ㅋ