순수 JS로 SPA 처럼 사용하기 - 1. 함수형 프로그래밍

발단

---

요즘 과제 테스트를 몇 번 해보다보니 함수형 프로그래밍을 통해 추상화하여 구현하는 예제들을 요구한다.

처음엔 막막했지만 쓰다보니 꽤 익숙한 부분들도 있어서 몇 번 풀어보면 금방 감이 올 것 같다.

 

명령형 vs 함수형

---

이 비슷한 듯 다른 두 가지 방식의 차이는 재사용성에 있다고 본다.

React에서 컴포넌트를 재사용할 수 있는 로직이 함수형이라고 말한다.

예를 들면, 아래처럼  id="app"인 어떤 dom 아래에 카드 레이아웃을 만들어주는 코드를 짜보자.

 

// 명령형 방식으로 구현.
const app = document.getElementById("app");
const card = document.createElement("div");
card.classList.add("cardcontainer");

card.innerHTML = `
  <h1 class="greeting">안녕!</h1>
`;;

app.append(card);

// 함수형 방식으로 구현.
export default Card({$target, initialState, onClick}) {
  this.state = initialState;
  this.onClick = onClick;
  this.$card = document.createElement("div");
  this.$card.classList.add("cardContainer");
  $target.append($card);
  
  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  }
  
  this.render = () => {
    $card.innerHTML = `
      <h1 class="greeting">안녕!</h1>
    `;
  }
  
  this.render();
}

 

읽기에는 명령형이 훨씬 더 쉽지만, 이 카드를 컴포넌트처럼 여기저기에다가 가져다 쓴다거나, 엄청 많은 카드를 렌더링 해야한다면 분명히 함수형으로 분리했을 때 더 효율적일 것이다.

(또, state도 사용할 수 있는 장점이 있다. 원하는 props를 immutable한 객체 형식으로 넘겨서 관리해주면 커스터마이징도 쉬울 것 같다.)

 

간단한 연하장을 만들어보는 목표로 ES6 형태로 구현하는 걸 해보려고 한다.

시간 여유가 되면 간단한 서버도 배포해서 원하는 말을 쓸 수 있는 기능을 한 번 만들어보는 걸로 해봐야겠다.

아래 데모를 한 번 눌러들 보셔요 신기합니당

 

demo

github

새해 인사를 보내보세요!