클린코드 - 추상화와 구체화

추상화? 구체화?

• 추상적이다, 구체적이다

추상적이다 - 구체적이지 않아 막연하고 일반적인 것

 

알 필요 없는 정보 숨기기 / 필요한 정보만 노출하기

• 우리는 아주 가까이에서 추상화가 되어있는 함수를 아주 많이 볼 수 있습니다.

// useState 는 그저 state 와 setState 함수만 반환할 뿐 내부 구현은 모두 숨겨져 있음
const [state,setState] = useState();

// useEffect 는 의존성 배열과 콜백을 넘겨주면 알아서 effect를 실행시켜준다는
// 사실만을 노출하고 있음
useEffect(()=>{} ,[])

이처럼 우리는 너무 복잡한 정보를 제공해주지 않도록 적절히 추상화를 하고 구체적인 정보를 숨길 필요가 있습니다.

• 아래 코드를 한 번 봐볼까요?

// 추상 -> 구체

import { 컵들기 } from 'cup.js'

컵들기();

// cup.js
// 높은 추상화 수준
function 컵들기(){
	팔뻗기();
	컵쥐기();
	컵들어올리기();
}

// cupDetail.js
function 팔뻗기(){
	컵방향으로손방향맞추기();
	손움직이기();
}

function 컵쥐기(){
	손피기();
	손펴서컵에갖다대기();
	손가락웅크리기();
	손에힘주기();
}

function 컵들어올리기(){
	손고정하기();
	팔꿈치각도줄이기()
}

function 컵방향으로손방향맞추기(){
	손선택하기();
	컵방향얼만큼인지확인하기();
	선택한손방향변경하기();
}

하지만 위 예시처럼 추상화 수준이 너무 깊어진다면 끝까지 확인할 수 없어지는 경지까지 오겠죠? 적절한 수준의 구체화와 추상화 수준을 유지하는 것이 좋습니다!