[spread & rest] - 1차 팀프로젝트 리팩토링 #세 번째

간략한 팀프로젝트 소개

• tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 
• 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 

---

(1) - [불어나는 API_URL 관리]

(2) - [중복되는 매개변수 제거]

 

이번 리팩토링도 위의 두 개와 비슷하게 코드를 압축하고자 하는 목적으로 진행하였다. 객체 형식의 데이터를 spread 문법으로 전달하고, 받을 때 rest를 사용해서 받도록 변경하였다.  

 

💡 기존 코드

 

인자로 넘기는 함수

/* 어쩌구 저쩌구 로직들 ... */ 
const movies = data.results;
const targetMovie = movies.filter(item => item.id === Number(getMovieId))[0];
const targetId = targetMovie.id;
const targetImg = targetMovie.backdrop_path;
const targetTitle = targetMovie.title;
const targetOverView = targetMovie.overview;
const movies = data.results.filter(item => item.id === Number(getMovieId))[0];;

handleLikeAdd(targetId, targetImg, targetTitle, targetOverView);
/* 어쩌구 저쩌구 로직들 ... */

매개변수로 받는 함수

async function handleLikeAdd(id, likeImg, likeTitle, likeOverView) {
/* 어쩌구 저쩌구 코드 */

📍 문제점

매개변수 추가 시 번거롭다

• 함수의 호출부, 정의부 둘 다 수정이 이루어져야 하며 코드의 유지보수를 어렵게 만든다.

순서 의존성 

• 순서를 필수적으로 맞춰주어야 하며 얘기치 못한 오류가 발생하고 디버깅에 어려움이 생길 수 있다.

 

💡 변경된 코드

 

인자로 넘기는 함수

handleLikeAdd({ ...movies, img: movies.backdrop_path });

• `movies` 객체의 데이터를 spread 문법으로 전달한다. 
• 그 중 사진 경로가 저장된 속성명은 `backdrop_path`로 되어 있기 때문에 해당 속성만 img로 변경하여 전달한다. 

 

매개변수로 받는 함수

async function handleLikeAdd({ id, img, title, overview }) {

 

• 받을 때는 rest 문법을 사용하여 전달 받는다.

📍 변경 목적

확장성

• 객체를 사용해서 전달할 경우 호출부와 정의부를 모두 수정하지 않아도 된다. 
  • 새로운 속성이 추가되더라도 객체만 수정하면 된다.
• 같은 매개변수(`movies`)를 받는 다른 함수를 만들더라도 신경쓸 부분이 없다. 
• 순서를 신경쓰지 않아도 되며 디버깅이 수월해진다. 

---

💡 정리

• 속성이 많은 객체를 전달할 때 일일이 따로 변수를 만들어서 전달하지 않는게 좋다. 
• 속성이 많은 객체일수록 코드가 훨씬 간결해진다.
• 뿐만 아니라 확장성, 유지보수성 측면에서도 좋은 방식이다.