💡 추상화란?
프로그래밍에서 추상화(Abstraction)란 "복잡한 내부 구현 로직을 숨기고, 사용자에게 필요한 핵심적인 기능(인터페이스)만을 노출하는 것"을 의미한다. 즉, "어떻게(How)" 처리되는지는 숨기고 "무엇을(What)" 할 수 있는지만 노출한다.
추상화의 주요 목적
1. 복잡성 관리
개발자가 시스템의 모든 세부 사항을 한꺼번에 파악하지 않아도 기능을 사용할 수 있게 한다.
2. 재사용성 및 유지보수
내부 구현이 바뀌더라도 외부로 노출된 인터페이스(추상화된 도구)가 같다면, 이를 사용하는 코드는 수정할 필요가 없다.
3. 가독성 향상
코드의 의도를 명확하게 전달한다. sendEmail()이라는 함수 이름은 그 내부의 네트워크 통신 로직보다 훨씬 직관적이다.
프론트엔드 개발에서의 추상화 예시
프론트엔드 개발자로서 자주 접하는 추상화는 다음과 같다.
예시1
A. 컴포넌트 추상화 (React/Next.js)
복잡한 UI 구조와 로직을 하나의 태그로 묶는 행위이다.
추상화 전: <div>와 <span>, onClick 이벤트 로직이 섞여 있는 50줄짜리 코드.
추상화 후: <LoginButton label="로그인" />
B. 데이터 페칭 추상화 (Custom Hooks)
데이터를 가져오는 과정을 추상화하여 비즈니스 로직만 남긴다.
구현: useEffect 내부에 fetch, error handling, loading state 관리.
추상화: const { data, isLoading } = useUser(userId);예시2
class ImplementAbstraction {
// method to set values of internal members
set(x, y) {
this.a = x;
this.b = y;
}
// 요구사항이 바뀌어도 개발자(사용자)의 코드는 그대로, 내부 구현만 수정하면 된다.
display() {
console.log(`a = ${this.a}`);
console.log(`b = ${this.b}`);
}
}
const obj = new ImplementAbstraction();
// 개발자(사용자)는 아래 메서드의 상세 로직을 몰라도 해당 메서드를 사용함으로써 원하는 결과를 얻을 수 있다.
// 그리고 동일한 로직을 반복해서 사용할 수 있다.
obj.set(10, 20);
obj.display();
// a = 10
// b = 20주의사항
추상화는 강력하지만, "잘못된 추상화는 중복된 코드보다 나쁘다"는 격언이 있다. 안하느니만 못한 추상화의 예시는 아래와 같다.
===Quoted===
프로그래머 A는 중복을 발견합니다.
프로그래머 A는 중복 부분을 추출해 이름을 붙입니다.
이로 인해 새로운 추상화가 생성됩니다. 새로운 메서드일 수도 있고, 어쩌면 새로운 클래스일 수도 있습니다.
프로그래머 A는 중복 코드를 새로운 추상화로 대체합니다.
아, 코드가 완벽해졌습니다. 프로그래머 A는 기쁜 마음으로 자리를 떠납니다.
시간이 흐릅니다.
현재의 추상화가 거의 완벽하게 적용될 수 있는 새로운 요구 사항이 나타납니다.
프로그래머 B가 이 요구 사항을 구현하는 임무를 맡게 됩니다.
프로그래머 B는 기존 추상화를 유지해야 할 의무감을 느끼지만, 모든 경우에 정확히 동일하게 적용되지는 않기 때문에 코드를 수정하여 매개변수를 받도록 하고, 그 매개변수의 값에 따라 조건부로 올바른 처리를 수행하도록 로직을 추가합니다.
한때 보편적이었던 추상화가 이제는 경우에 따라 다르게 동작하게 되었습니다.
또 다른 새로운 요구사항이 도착합니다.
프로그래머 X.
또 다른 추가 매개변수.
또 다른 새로운 조건문.
코드가 이해하기 어려워질 때까지 이 과정을 반복합니다.
바로 이쯤에서 여러분이 이야기에 등장하고, 여러분의 삶은 극적으로 나빠지기 시작합니다.
===Quoted End===
그동안 내가 한 추상화는 대부분 위 이야기의 과정을 따라갔다. 그렇기 때문에 앞으로 추상화를 할때는 아래 주의사항을 명심하는게 좋겠다.
1. 과도한 추상화 (Over-engineering)
너무 이른 시점에 공통화를 시도하면, 나중에 각기 다른 요구사항이 생겼을 때 대응하기가 매우 어려워진다.
2. 적절한 균형
코드가 2~3번 이상 반복되거나, 읽었을 때 내부 로직 때문에 전체 흐름 파악이 방해될 때 추상화를 시작하는 것이 좋다.
☑️ 참고
