[리액트 클론코딩] 4. API 호출 및 데이터 연동하기

 

 

너무 오랜만에 올리는 클론코딩 근황...

 

무려 두달만에 커밋을 하였다...^^!

 

Vue는 정해진 hook이 있었고 강의나 실제 사용하는 곳에서도 비슷비슷한 느낌의 구조라 금방 적용할 수 있었다.

하지만 리액트는 라이프사이클을 보고... hook을 봐도 무슨 말인지 모르겠다.

(Vue를 처음 공부할 때랑 똑같은 느낌.. 나중엔 나아지겠지만..!)

 

그래서 주변에 리액트를 사용하는 개발자들에게 물어보고 구글링도 많이 해봤는데 모두 구조를 다르게 사용하고 있었다.

고민하다가 여러가지 정보들 + Vue에서 사용하는 구조를 다 혼합해서 구조를 정리하고 페이지에 데이터 연동까지 완료했다.

 

 

 

---

 

 

 

1. 설정

 

해당 글을 참고하였다.

이 글과 동일하게 AxiosInstance를 생성하고 api를 작성했다!

[Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법

 

import axios, { AxiosInstance } from 'axios'

export const request: AxiosInstance = axios.create({
  baseURL: 'http://localhost:8081',
})

 

 

 

2. 이렇게 호출하였다.

 

해당 글을 참고하였음...!

# 리액트 hooks: 함수형 컴포넌트

 

📄 호출부

useEffect(() => {
    const callGetCategory = async () => {
      const { data } = await getCategory()

      let arr: Category[] = []
      let item: Category

      data.forEach((obj: Category) => {
        if (!obj.cate_up_seq) {
          item = {
            cate_nm: obj.cate_nm,
            cate_seq: obj.cate_seq,
            cate_up_seq: obj.cate_up_seq,
          }
          arr.push(item)
        }
      })
      setCategoryList(arr)
    }

    callGetCategory()
}, [])

 

호출과 연동 완료...!

 

 

---

 

 

 

집에 돌아가는 길에 문득 '리액트를 리액트답게 사용해야하는 것이 아니었나'하는 생각이 들었다...ㅠ

이왕에 리액트를 사용할거면 분명 더 효율적인 방법이, 리액트의 강점을 살리는 방법이 있을텐데 덜 찾아본게 아닐까 하는 생각...🥺

 

일단 구조는 이렇게 가져가겠지만 더 공부하면서 좋은 방법을 찾게되면 한꺼번에 바꿀 생각이다.

 

홧팅..!