fetch API 적용법 정복

fetch를 통해 외부 API를 받아와 특정 컴포넌트에 연결해주려던 중,

내 지식의 부족으로 한참동안 연결을 하지 못했다.

때문에, 잊지 않도록 적어두려한다.

---

fetch 사용법

우선 fetch를 사용하는 방법은

fetch(외부URL)
.then(urlData => urlData.json())
.then(json => console.log(json))  // [{...}]

항상 이런 패턴으로만 봐왔었다. 다양한 사용법은 알지 못했다..

문제의 발단

그리고 나는 fetch를 통해 API에 접근하는 코드를

완전히 분리된 다른 컴포넌트로 옮겨주고 싶었다.

export function api () {
  const endpoint = 'url';
  
  return fetch(endpoint)
  .then(urlData => urlData.json())
  .then(json => json)
}

위와 같은 컴포넌트를 만들었는데,

문제는 이 함수형 컴포넌트를 다른 컴포넌트 내에서 실행했을 때,

promise 객체로만 전달이 되는 것이었다.

문제 해결

console.log()에서는 잘 나오는데 전달은 절대 되질 않아 한참을 고민하던 중

Scope 규칙과 useEffect를 떠올렸다.

export function api () {
  const endpoint = 'url';
  
  return fetch(endpoint)
  .then(urlData => urlData.json())
}
/*-------------------------------*/

const [data, setData] = useState(null);
useEffect(() => {
  api().then(json => setApi(json))
}, [])

<Component data={data} />

결국 위 방법으로 해결에 성공했다.

data State는 상위 Scope이기 때문에, json에 접근할 수 있었고,

내가 받아오고자 한 API는 최초 렌더링에만 필요했기 때문에,

useEffect와 setState를 사용해 다른 컴포넌트에 전달할 수 있었다.