컴포넌트와 객체지향적인 사고

객체지향 어디서 많이 들어본 말이다.
단순히 Object의 개념을 벗어나서 객체가 뭔지 왜 지향해야 하는지
그리고 이런 사고들이 어디서부터 오게된건지 정리해보고자 한다.

절차지향으로부터 벗어나기

절차지향의 정의는 다음과 같다.

• 위부터 아래 순서대로 진행되는 형태
• 재사용이 가능하나 기존에 썼던 코드를 복붙하는 방식

마치 setTimeOut이 없는 자바스크립트랄까..
음.. 그래도 아직은 확 와닿지는 않다. 그 시대에 안살아봐서 그런가

그렇게 등장한 객체지향

• 객체와 객체간 자유로운 데이터 이동..
• 유지보수가 편리...

찾아보면 이런 식으로 정의가 되어있다.
사실 이렇게 말해서는 잘 모르겠다.
객체지향은 어디서 나타난걸까?
사실 만물에서 나타났다해도 무방하다.
모든게 객체다.

오늘 내가 사먹은 커피, 가지고 있는 휴대폰, 지금 사용하고 있는 노트북과 심지어 나까지 모두 객체라고 보는 것이다.

객체지향적인 사고를 좀 더 쉽게 이해하기 위해 예시를 하나 들어보자
다른 예시를 들어볼까 생각했지만 커피전문점이 너무 적합해서 봤던 예시를 나름 해석해서 정리하겠다.

커피전문점 도메인

손님 메뉴판을 보고 커피를 주문하면 바리스타가 커피를 제조해서 주는 방식

여기서 객체는 다음과 같이 생각해볼 수 있다.

사실 더 생각해보면 돈을 지불한다던지 포스기에 음료를 찍는다던지.. 객체로 생각해볼만한 것들은 매우 많지만 그렇게 하면 끝도 없기에 앞의 5가지의 객체만 생각해보기로 하자

이들의 객체는 메시지를 주고받는다.
이런 식으로 말이다.

그럼 이제 설계와 구현을 하기 전에
사실 객체지향이라고는 하지만 좋은 객체를 먼저 선정하기보다
협력관계가 어떤 메시지를 전달할 것인가와 어떤 메시지를 받을 것인가를 생각해보는게 먼저이다.

앞서 커피를 주문하라는 메시지 때문에 손님이라는 객체가 불러진 것처럼 말이다.

객체지향의 특성 추상화

객체지향의 다양한 특성 중 추상화, 캡슐화, 상속성, 다형성이 있다.
그 중 추상화의 정의는 다음과 같다.

• 공통된 것들을 모아 일반화 하는 것이다.
  ex) 배, 비행기, 기차, 자동차는 모두 운송수단이라는 이름으로 묶을 수 있다.

잠깐, 그런데 여기 추상화의 특성을 보면 생각나는게 하나 있을 것이다.
바로 컴포넌트이다.
컴포넌트도 공통된 것을 재사용한다는 점에서 추상화의 개념과 같다.
그렇다 바로 추상화라는 개념에서 나온 것이 컴포넌트이다.
이것을 모르고 컴포넌트는 레고다.. 블럭이다.. 할 때와 알고 이해한 컴포넌트는 하늘과 땅 차이라고 할 수 있다.

명령형 프로그래밍 vs 선언형 프로그래밍

명령형 프로그래밍은 어떻게(HOW) 할 것인가에 초점을 두고 선언형 프로그래밍은 무엇을(WHAT) 할 것인가에 초점을 둔다.

ex)
명령형 : 바리스타 직원에게 가서 메뉴를 고른 뒤 주문을 한다. 그러면 바리스타는 음료를 제조하여 손님에게 준다.
선언형 : 아이스 아메리카노 주세요.

위의 예시를 보면 명령형은 어떻게 주문을 하고 음료를 어떻게 받는지에 집중하는 반면 선언형은 무엇을 원하는가에 집중한다.

다음은 arr이란 배열에 각 2를 더한 값을 리턴하는 예시다.

• 명령형

function plus() {
  let result = [];
  for(var i = 0; i < arr.length; i++) {
    result[i] = arr[i] + 2
  }
  return result;
}

• 선언형

function plus() {
   return arr.map((item)=>item+2);
}

위의 예시를 보면 for문에 사용된 변수가 map은 숨겨져서 안보이는 것을 볼 수 있다. 한눈에 봐도 선언형 프로그래밍이 보기 편하고 유지보수가 편할 것 같다는 생각이 든다.

또 다른 예시다.

• 명령형

const body = document.querySelector('body');
var h2 = document.createElement('h2');
body.appendChild(h2);

• 선언형

<h2></h2>

html은 ui를 편하게 구성해주는 마크업 용어이다.
h2태그를 사용하고 싶을 때 아래처럼 입력만해주면 보이지 않는 곳에서 명령형처럼 인식해주는 것이다.

컴포넌트 또한 마찬가지다.
<List/>라는 컴포넌트를 생성했을 때 컴포넌트 외부에는 태그 하나만 보이게 되고 내부는 데이터 및 css 다양하게 들어가 있는 것을 볼 수 있다.
때문에 선언형 프로그래밍 특징을 가지는 것을 알 수 있다.
우리는 앞으로도 선언형 프로그래밍 위주로 코딩할 수 있게 고민해보아야 한다.

참고자료

생각하라, 객체지향처럼
변경에 유연한 컴포넌트
선언형 프로그래밍이란 무엇일까?