[Error] useEffect에 대한 잘못되었던 생각...!

정정합니다

 

시작하기에 앞서 

 

개발을 마치고

 

테스트를 하던 도중 이상한 점을 발견했다...

 

 

이것들은 또 무슨 에러인가...

 

getCartData API 호출 중 오류 발생: AxiosError [AggregateError]
    at AxiosError.from (webpack-internal:///(ssr)/./node_modules/axios/lib/core/AxiosError.js:85:16)
    at RedirectableRequest.handleRequestError (webpack-internal:///(ssr)/./node_modules/axios/lib/adapters/http.js:531:81)
    at RedirectableRequest.emit (node:events:519:28)     
    at eventHandlers.<computed> (webpack-internal:///(ssr)/./node_modules/follow-redirects/index.js:41:28)        
    at ClientRequest.emit (node:events:519:28)
    at Socket.socketErrorListener (node:_http_client:495:9)
    at Socket.emit (node:events:519:28)
    at emitErrorNT (node:internal/streams/destroy:169:8) 
    at emitErrorCloseNT (node:internal/streams/destroy:128:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
    at Axios.request (webpack-internal:///(ssr)/./node_modules/axios/lib/core/Axios.js:50:49)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'ECONNREFUSED',
  errors: [
    Error: connect ECONNREFUSED ::1:80
        at createConnectionError (node:net:1634:14)      
        at afterConnectMultiple (node:net:1664:40)       
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      errno: -4078,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '::1',
      port: 80
    },
    Error: connect ECONNREFUSED 127.0.0.1:80
        at createConnectionError (node:net:1634:14)      
        at afterConnectMultiple (node:net:1664:40)       
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      errno: -4078,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 80
    }
  ],
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [ 'xhr', 'http' ],
    transformRequest: [ [Function: transformRequest] ],  
    transformResponse: [ [Function: transformResponse] ],    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function], Blob: [class Blob] },   
    validateStatus: [Function: validateStatus],
    headers: Object [AxiosHeaders] {
      Accept: 'application/json, text/plain, */*',       
      'Content-Type': 'application/json',
      'User-Agent': 'axios/1.6.7',
      'Accept-Encoding': 'gzip, compress, deflate, br'   
    },
    withCredentials: true,
    method: 'get',
    url: 'api/cart/view',
    data: undefined
  },
  request: <ref *1> Writable {
    _events: {
      close: undefined,
      error: [Function: handleRequestError],
      prefinish: undefined,
      finish: undefined,
      drain: undefined,
      response: [Function: handleResponse],
      socket: [Function: handleRequestSocket]
    },
    _writableState: WritableState {
      highWaterMark: 16384,
      length: 0,
      corked: 0,
      onwrite: [Function: bound onwrite],
      writelen: 0,
      bufferedIndex: 0,
      pendingcb: 0,
      [Symbol(kState)]: 17580812,
      [Symbol(kBufferedValue)]: null
    },
    _maxListeners: undefined,
    _options: {
      maxRedirects: 21,
      maxBodyLength: Infinity,
      protocol: 'http:',
      path: '/api/cart/view',
      method: 'GET',
      headers: [Object: null prototype],
      agents: [Object],
      auth: undefined,
      family: undefined,
      beforeRedirect: [Function: dispatchBeforeRedirect],      beforeRedirects: [Object],
      hostname: 'localhost',
      port: '',
      agent: undefined,
      nativeProtocols: [Object],
      pathname: '/api/cart/view'
    },
    _ended: true,
    _ending: true,
    _redirectCount: 0,
    _redirects: [],
    _requestBodyLength: 0,
    _requestBodyBuffers: [],
    _eventsCount: 3,
    _onNativeResponse: [Function (anonymous)],
    _currentRequest: ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: false,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: true,
      maxRequestsOnConnectionReached: false,
      _defaultKeepAlive: true,
      useChunkedEncodingByDefault: false,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      strictContentLength: false,
      _contentLength: 0,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      _closed: false,
      _header: 'GET /api/cart/view HTTP/1.1\r\n' +       
        'Accept: application/json, text/plain, */*\r\n' +        'Content-Type: application/json\r\n' +
        'User-Agent: axios/1.6.7\r\n' +
        'Accept-Encoding: gzip, compress, deflate, br\r\n' +
        'Host: localhost\r\n' +
        'Connection: keep-alive\r\n' +
        '\r\n',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: nop],
      agent: [Agent],
      socketPath: undefined,
      method: 'GET',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      joinDuplicateHeaders: undefined,
      path: '/api/cart/view',
      _ended: false,
      res: null,
      aborted: false,
      timeoutCb: [Function: emitRequestTimeout],
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: 'localhost',
      protocol: 'http:',
      _redirectable: [Circular *1],
      [Symbol(shapeMode)]: false,
      [Symbol(kCapture)]: false,
      [Symbol(kBytesWritten)]: 0,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kChunkedBuffer)]: [],
      [Symbol(kChunkedLength)]: 0,
      [Symbol(kSocket)]: [Socket],
      [Symbol(kOutHeaders)]: [Object: null prototype],   
      [Symbol(errored)]: null,
      [Symbol(kHighWaterMark)]: 16384,
      [Symbol(kRejectNonStandardBodyWrites)]: false,     
      [Symbol(kUniqueHeaders)]: null
    },
    _currentUrl: 'http://localhost/api/cart/view',       
    [Symbol(shapeMode)]: true,
    [Symbol(kCapture)]: false
  },
  cause: AggregateError [ECONNREFUSED]:
      at internalConnectMultiple (node:net:1114:18)      
      at afterConnectMultiple (node:net:1667:5)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  }
} [
  Error: connect ECONNREFUSED ::1:80
      at createConnectionError (node:net:1634:14)        
      at afterConnectMultiple (node:net:1664:40)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 80
  },
  Error: connect ECONNREFUSED 127.0.0.1:80
      at createConnectionError (node:net:1634:14)        
      at afterConnectMultiple (node:net:1664:40)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 80
  }
]

음 getCartData에서 발생한 문제로 보여서 바로 getCartData 함수를 뜯어봤는데...

 

아무 문제가 없어보였다...

 

그럼 getCartData가 사용된 부분을 테스트해보자...!

 

찾았다

 

아까 전에 useEffect를 최대한 안쓰겠다고 했던가...?

 

정정하겠다.

 

useEffect는 어떻게 쓰냐에 따라 다르다

 

useMemo에 getCartData()를 호출하니 문제가 생겼던 것이다...!

 

  
  const detectCheckedAll = useMemo(() => {
    countTotalPriceData();
  }, [checkedItems])
  

  useEffect(() => {
    getCartData();
    countTotalPriceData();
    console.log('useEffect1 호출...')
  }, [state])
  
  useEffect(() => {
    handleCheckAllChange();
    setAllChecked(isAllchecked());
    console.log('useEffect2 호출...')
  }, []);

 

이런식으로 바로 수정해주니 오류는 말끔히 해결

 

다시 말하지만 정정한다...

 

useEffect는 어떻게 쓰냐에 따라 다르고

 

useMemo는 남발하지 말자...