Eojin Han

개요

추상화 레벨을 어느정도로 가져갈 건지에 따라 달라지는 부분이지만, 일반적으로 추상화를 하더라도 목적과 역할을 드러내는 핵심적인 프로퍼티, 인자는 의도적으로 외부에서 받도록 하는 경우들이 많다.

문맥과 동작을 충분히 유추할 수 있도록 하여, 수정이 필요한 상황이 아니라면 내부를 들여다 보지 않아도 될 수 있도록 하기 위함이다.

하지만 드물지만 가끔씩은 핵심 프로퍼티일지라도 추상화 시키는 것이 더 깔끔한 코드가 되는 경우도 있어서, 해당 사례를 소개하고자 한다.

헤더 컴포넌트이고, title과 canGoBack을 프로퍼티로 받는다.

아이콘 버튼의 경우 뒤로가기를 할 수 있는 상황이라면(canGoBack) 뒤로가기 아이콘 버튼만 표기하고, 그 외에는 기본 아이콘 버튼 세트를 보여주며, 버튼을 누르면 해당 화면으로 이동하는 간단한 예시다.

일반적으로 추상화를 시키더라도 문맥과 동작을 충분히 유추할 수 있도록 핵심 요소는 의도적으로 전달받도록 하는 편이라고 했다.

여기선 버튼을 리팩토링 할 건데, 버튼에 있어서 핵심적인 요소은 무엇인가?

바로 눌렀을 때 어떤 동작을 할 지(onPress)이다.

버튼이 있고, 누르면 어떤 동작이 수행되네? 이거만 알면 흐름 파악은 끝이다. 솔직히 다른 것들은 다 감추어도 된다.

하지만 이번에는 onPress도 아이콘 버튼 컴포넌트 내부로 옮기는 리팩토링을 할 것이다.

왜???

이름이 그냥 Button 컴포넌트였으면 당연히 onPress를 무조건 프롭으로 전달받도록 하는 것이 맞다.

Button 이라는 컴포넌트 명만 보고 어떤 동작을 하는 건지 전혀 유추할 수 없기 때문이다.

…. 블라블라 정리 ….

onPress를 바꿈에 따라 GoBack 버튼이 GoHome 버튼으로 동작하면 안된다.

GoBack 버튼이면 GoBack이라는 동작은 당연히 실행되어야 하는 동작인 것이다.

대신 그 외의 추가 동작이 같이 실행됐으면 하는 경우가 있으므로 onPress는 전달받되, 옵셔널 프롭으로 두도록 한다.

그리고 handleOnPress = () ⇒ { defaultAction(); customOnPress(); } 이렇게 만들어서 onPress에 전달하면 딱 좋다!

단순히 그냥 추상화 단계를 높히려고 그런 거 아니야? 라고 보일 수도 있지만, 핵심은 그게 아니다.

버튼 이름에 문맥에 대한 정보를 담았으므로, 해당 문맥과 관련된 행위는 반드시 수행되어야 한다는 관점에서, 당연하게 수행되어야 하는 행위를 컴포넌트 안에 내장시킨 것이라는 게 중요한 포인트다.