TIL-23.05.24

 

문제점&시도한것

useEffect 훅에서 async await 함수 사용하기

api 서버 통신 함수를 컴포넌트가 렌더링될때 처음 한번만 실행해주기위해 useEffect 훅을 사용했다.

처음에 작성했던 코드는 

useEffect(async() => {
await axios.get() })

물론 에러가 나오는 코드이다. 내가 받았던 에러는 'Uncaught TypeError: destroy is not a function'

이 에러가 발생한 이유는 useEffect에 비동기 함수를 직접사용해서 발생한것이다.

useEffect훅과 비동기 함수를 같이 사용하려면, 훅 내부에서 사용하면된다

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      // 비동기 작업 완료 후 데이터를 사용하거나 상태 업데이트 등을 수행합니다.
    } catch (error) {
      // 에러 처리 로직을 추가합니다.
    }
  };

  fetchData();
}, []);

이런식으로 훅 내부에서 비동기 통신 함수를 정의하고, 실행해주면된다.

혹은 훅 외부에서 비동기 통신 함수를 정의하고, 훅내부에서 실행해줘도 같은 결과를 가져온다.

 

 

 

알게된점

프로젝트를 연달아 진행하면서 계속해서 가장 크게 느끼는점은, 

물론 새로운 기술, 새로운 메소드, 새로운 라이브러리 등등도 좋지만 이렇게 가장 기본적인 사항에 대한 정확한 사용법이 정말로 중요하다라는걸 계속 깨닫고있다. 내가 매일 JS알고리즘 문제를 비록 쉬운 문제이지만 푸는 이유가 기본메소드 사용법을 정확히 알고 익숙해지기 위함인데 리액트에서의 기본 함수들을에 대해 그동안 소홀했다는 반성이 든다.

한번을 사용하더라도 정확하게 알고 사용하자라는 마음가짐으로 코딩을 해야겠다