RORO 패턴이란 - JavaScript

RORO 패턴은 Recive an object, Return an object의 약자로 객체로 받고 객체로 반환한다는 뜻입니다.

 

명명된 인수

RORO 디자인 패턴은 여러 장점이 있지만 보통 명명된 인수를 사용하고 싶을 때 많이 사용합니다.

명명된 인수란 함수 호출 시 각 인수에 이름을 명시적으로 지정하는 것입니다.

 

JS에는 없고 C#이나 Python에는 있는 기능이었지만 ES6의 구조 분해 할당이 나오면서 JS도

명명된 인수를 사용할 수 있게 되었습니다.

 

코드로 보는 게 빠르겠죠?

 

RORO 패턴 적용 전

function printUserInfo(name, age, role) {
  const print = alert(`이름: ${name} 나이: ${age} 권한: ${role}`)
  return print;
}

const print = printUserInfo('woonrin', 18, 'student');

 

 

사용자의 정보를 입력받고 alert으로 띄워주는 함수를 반환하는 간단한 함수입니다.

 

그런데 함수의 이름을 보고 어떤 함수인지는 알겠으나 지금처럼 인수가 3개 정도가 아니라

8개 10개 정도가 되면 어떻게 될까요?

 

함수를 직접 작성하지 않은 개발자는 함수에 전달하는 것이 무엇인지 알지 못하며

함수가 정의된 곳으로 이동한 후에

"아 이걸 넘겨준거구나"

 

라고 깨닫지.

값만 보고 무엇인지 예측하기는 쉽지 않습니다.

 

하물며 직접 작성한 개발자도 한동안 그 함수를 건드리지 않으면 한눈에 파악하기 어렵기 십상이죠.

이럴 때 명명된 인수가 가독성을 훨씬 향상시켜줍니다.

RORO 패턴을 사용하면 JS 내에서 명명된 인수를 사용할 수 있습니다.

RORO 패턴 적용 후

function printUserInfo({ name, age, role }) {
  const print = alert(`이름: ${name} 나이: ${age} 권한: ${role}`)
  return { print };
}

const { print } = printUserInfo({
  name: 'woonrin', 
  age: 18, 
  role: 'student',
});

 

훨씬 가독성이 좋아지지 않았나요?

어떤 요소를 넘기는 지 한 눈에 들어옵니다.

 

RORO 패턴은 위에서 말한 인수가 8개 10개 같이 아주 많은 함수에서 진가를 발휘합니다.

 

📖 마치며

RORO 패턴 뭔가 대단한 게 있는 것 같이(?) 보였지만 막상 봐보니

평소에 사용하고 있던 방식이었습니다.

이렇게 아무 생각 없이 사용하던 게 사실은 디자인 패턴 중의 하나였다는

사실을 알게되니 좀 놀랐습니다.

 

인수가 아무리 많아도 RORO 패턴을 적용하면 협업 면에서 가독성이 아주 많이 향상될 거라고 생각합니다.

하지만 모든 디자인 패턴이 그러하듯 무조건 좋은 것은 없으며 적재적소에 사용하는 것이 좋습니다.

 

RORO를 적용하지 않아도 될 간단한 함수인데도 굳이굳이 적용할 필요는 없습니다!

앞으로는 무심코 사용하던 게 사실 디자인 패턴이 아닐 지 생각해보며 공부하려 합니다.