🔎 서론

특정 함수에 대한 return 값 또는 return 객체 내부의 특정 프로퍼티를 새로운 변수에 정의 또는 할당하고 싶은 경우, 별도 정의 코드를 작성하지 않고 es6 문법 중 구조 분해 할당 을 이용하여 코드 길이를 줄일 수 있다.

🎯 본론

상황

• useMutation() 함수의 return 객체 중 mutate 라는 property를 onCreate 라는 변수에 할당하고 싶을 때

기본 방법

const data = useMutation(callbackFn, options);
let onCreate; 
if (data && data.hasOwnProperty('mutate')) {
	onCreate = data.mutate;
};

ES6의 객체 구조 분해 + 기본 방법

const { mutate } = useMutation(callbackFn, options) || [];
const onCreate = mutate ?? null;

ES6의 객체 구조 분해 할당 방법

const { mutate : onCreate } = useMutation(callbackFn, options) || [];

💡 결론

• es6 문법만 잘 익혀도 불필요한 코드 길이를 단축할 수 있다. 이는 곧 빌드 시, 성능 개선에도 약간의 도움을 줄 수 있을 것이라고 본다.