(rough) 타입스크립트를 이용한 풀스택 강좌 - 추상화

vscode(Snippets) 스니펫 참고

import React from 'react'

export default function prac(): JSX.Element {
  return (
    <div>prac</div>
  )
}

지금까지 react를 사용하면서 JSX.Element를 반환하는 형태는 작성해본적이 없는데, 이부분을 삭제해도 타입스크립트가 자동으로 추론해준다.
하지만 내가 함수를 작성할때 어떠한 값을 반환하겠다고 명시해주고 그것에 맞게 작성하는 것과 그냥 함수를 작성하는것은 큰 차이가 있으니, 함수의 리턴값을 명시하는 습관을 들이자.

프로그래밍에서의 추상화란?

불 필요한 정보 숨기기 -> 코드의 복잡도가 낮아짐 -> 유지보수가 수월해진다

ex) API & UI
내부 구현은 숨기고, 외부에는 필요한 입/출력만 노출된 인터페이스
-> 프로그램 <-> 프로그램 = API ex)console.log
-> 프로그램 <-> 사람 = UI

ex)

const userName = "...";
const userAge = 123;

const root = document.getElementById("root");
const div = document.createElement("div");

const h1 = document.createElement("h1");
h1.innerText = '이름 : ${userName}';

const h3 = document.createElement("h3");
h3.innerText = '나이: ${userAge}';

div.appendChild(h1);
div.appendChild(h3);
root?.appendChild(div);

유저네임, 유저에이지가 주어진 상황에서 루트 아이디를 가진 디브에 이름과 나이정보를 가진 디브를 만들어서 넣어주는 코드이다. 정상적으로 동작하지만 추상화가 이루어져 있지 않다.

하나의 스코프에서 너무 많은것을 하고 있는데 이를 줄이면

const userName="...";
const userAge=123;
appendUserInfo(userName, userAge);

함수로 모든 내용을 정리해줄 수 있고 복잡한 내용을 다룰 필요가 없다.
함수에 적절한 인자를 넣어서 호출하면 화면에 정보가 추가된다는 것만 알면된다.
그안에서 어떠한 일들이 일어나는지는 신경쓸 필요가 없다.

function appendUserInfo(userName: string, userAge: number) {
    const root = document.getElementById("root");
    const div = document.createElement("div");

    const h1 = document.createElement("h1");
    h1.innerText = '이름: ${userName}';

    const h3 = document.createElement("h3");
    h3.innerText = '나이: ${userAge}';

    div.appendChild(h1);
    div.appendChild(h3);
    root.appendChild(div);
}

코드 자체에는 변함이 없지만 복잡도는 줄어들었다.

이런식으로 추상화를 계속 진행하면

기존에 비해 코드양이 많이 늘어난 상황을 볼 수 있다. 코드 양이 늘어났다고 해서 더 복잡해진게 아닌가 하지만, 결국 인간은 한번에 신경쓸 수 있는 범위가 한정적이고 그렇기에 이 범위를 최대한 줄이는 것이 유지보수/코드 재사용을 수월하게 해준다.