Declarative?

reference
https://www.youtube.com/watch?v=r7M9B_dEbCI&t=108s

Declarative & Imperative

Imperative

명령적인 코드

const name = "Lee";

const $p = document.createElement("p");
$p.innerHTML = name;

const $app = document.getElementById("app");
$app.appendChild($p);

컴포넌트는 선언적?

컴포넌트는 개발자로 하여금 어떻게(How) UI를 그려야 할지에 대한 고민 없이 주어진 상태에 기반해서 어떤(What) UI가 생겨야 하는지 적기만 하도록 도와준다

How

• 어떻게
• 어떤 방식으로
• 어떤 순서로

What

• 무엇을
• 어디에
• 어떤 모양으로

// What
const name = "Lee";

// How
const $p = document.createElement("p");
$p.innerHTML = name;

const $app = document.getElementById("app");
$app.appendChild($p);

How를 분리

// How
function p(text) {
  const $p = document.createElement("p");
  $p.innerHTML = text;
  return $p;
}

function render(element) {
  const $app = document.getElementById("app");
  $app.appendChild(element);
}

// What
const name = "Lee";
render(p(name));

How: 어떻게 데이터를 바꿀까? 언제 데이터를 바꿀까?

What: 무슨 데이터를 바꿀까? 어디에 값을 보여줄까?

상태를 뷰에 반영한다

Imperative한 코드

// What
let count = 100;
const $button = document.getElementById("button");

// How
$button.addEventListener("click", () => {
  // What
  const $count = document.getElementById("count");
  count += 1;
  $count.innerHTML = count;
})

Declarative한 코드로

// How
function render(initialState, createElment) {
  function renderToApp(element) {
    const $app = document.getElmentById("app");
    $app.innerHTML = "";
    $app.appendChild(element);
  }
  function setState(state) {
    renderToApp(createElement(state, setState)); 
  }
  
  setState(initialState);
}

// What
render({ count: 100 }, (state, setState) => 
  div(
    div(
      p("Hola"),
      p("my age ${state.count}")
    ),
    div(
      p("my name is Tom"),
      button("plus", () => {
        setState({
          count: state.count + 1,
        });
      })
     )
  )
);

관심사 분리

기존 웹 문서는 역할에 따라 코드를 분리했다

Declarative UI 패턴을 통해 HTML, CSS, Javascript 자연스럽게 섞을 수 있음
그래서 역할이 아닌 관심사를 기반으로 컴포넌트를 쪼개게 된다
컴포넌트를 잘 쪼개기 위해서는 우리가 표현하고자하는 정보 에 집중해야 한다

뷰의 일관성

A유저는 B유저의 인스타 게시물들을 보고 있는데 A유저가 프로필을 바꾼다고 가정한다
새로 로드되는 게시물의 프로필은 A유저가 바꾼 프로필로 나오는데 A유저가 프로필을 바꾸기전 로드된 게시물은 이전 프로필로 유지되고 있는 것을 뷰 일관성이 유지되지 않고 있다고 말할 수 있다

단일 진실 공급원

특정한 상태가 변경되었을 때 해당 상태를 각 컴포넌트(게시물)에 전파하는데 이 상태를 여러개로 만들지 말고 하나의 진실로 만들자라는 개념이다
redux, mobx가 등장한 이유이다

Declartive 는 공통된 How를 잘 분석해서 꺼내고 이를 통해 What을 뭉치는 과정이라고 할 수 있다