[React] API 호출함수 관심사의 분리

 

 

 

 

포트폴리오 사이트 개발을 완료하고 리팩토링 중이었다. 컴포넌트 별로 코드에 문제가 없는지, 클린한지 보다가 아예 데이터 호출 부분을 통째로 분리시키는게 좋겠다고 생각했다. 여러 강의를 들어보다 Next.js에서는 api 함수를 따로 분리시키는 것을 보고 진행완료된 React에도 적용해보고 싶었다. 이전에 작성된 코드는 다음과 같다.

 

 

 

컴포넌트 내에 state를 두고 uesEffect로 컴포넌트가 마운트될때 state에 저장하는 방식이다.

 

 

이제 데이터를 호출하는 api 부분을 분리시켜 보자.

좌측 api.tsx로 데이터를 호출하는 함수부분을 분리시켰다. 그러나 컴포넌트에서는 여전히 data를 받기 위해 useEffect로 데이터를 받아와 state에 저장해야 되었다.

확실한 관심사의 분리를 통해 코드를 깔끔하게 작성해보고 싶었다. 그래서 아예 customHook을 작성하여 좀 더 유연하게 대처해보고자 했다. 데이터를 받아오는 컴포넌트가 해당 컴포넌트만 있는게 아니기 때문이다.

 

 

먼저 작성된 api를 이용하여 customHook을 작성해보자.

 

 

state를 useProjectData라는 hook에서 관리하게 만들었다. data와 loading error를 반환하게 작성했다.

받아보는 데이터를 타입 캐스팅을 위해 굳이 작성해야 하지 않을 부분을 useState에 직접 보내주었다.

const [projectData, setProjectData] = useState([]);

const projectList = projectData as ProjectDataProps[];

const [projectData, setProjectData] = useState<ProjectDataProps[]>([]);

 

 

수정 결과

 

 

관심사의 분리 전

 

 

관심사의 분리 후

보다 간결하게 만들어 주었다.

 

 

데이터 전달 과정은 다음과 같다.

api.tsx => useProjectData.tsx (hook) => Portfolio.tsx

 

 

api부분도 데이터를 받아오는 코드가 중복으로 작성되어 있었다.

중복 코드를 최대한 자제하기 위해서 api함수를 인스턴스화 시키고, url을 파라미터로 받도록 만들어 get메서드를 사용할 때 간결히 사용할 수 있도록 만들었다.