![]()
이전 글들 중 유지보수가 편리한 코드를 만드는 강좌의 정리글을 올린적이 있다. 내가 구현한 코드를 보던 중 너무 의존성이 강하게 묶여있는 코드를 발견해 이를 리팩토링 하는 기록을 남기고자 한다. 코드 const ShowPosition = ({ positions, tyleInfoSetFun, operatorImgData }: positionsInterface) => { const ePositions = positions.map(e => e.ePosition); // 객체형으로 선택됬는지 여부를 보관하기 const [selectedState, setSelectedState] = useState({ position: { duelist: false, recon: false, sentinels: false, co..
문제의 발단은 이러하다. 개발한 컴포넌트에서 필요 이상의 API 요청이 발생하는 것이 문제이다. 파악한 문제는 2가지 이며 천천히 문제의 원인과 해결 방법에 대한 설명을 작성하겠다. 1. API 요청 방식 이 문제가 가장 근본적인 원인이였다. 기존 코드는 특정 컴포넌트를 클릭하면 그 컴포넌트에 맞는 데이터를 요청하는 방식으로 설계했다. 그로인해 같은 데이터라도 다시 다른 컴포넌트를 클릭했다가 과거의 컴포넌트를 눌러도 같은 API 요청이 발생하게 된다. 이러한 방식은 다른 프로젝트나 컴포넌트 개발시 큰 데이터 혹은 서버의 상태에 따라 원활한 서비스 제공이 어려울 것이라 판단했다. 이 문제는 각각 API 요청을 하던 로직을 초기 렌더링시 다수의 데이터를 병렬로 요청해 처리하도록 했다. 기존 코드 // 해당 ..
