React는 왜 선언형 프로그래밍을 지향할까?

개요

Declarative React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

React에서는 React를 선언적이라고 잘 설명하고 있습니다. “선언형 뷰는 코드를 예측 가능하고, 디버깅을 쉽게 만든다” 라고 설명하고 있으며, React가 선언형 프로그래밍의 패러다임을 지향하는 이유와 특징에 대해서 알아보았습니다.

명령형 프로그래밍

선언형 프로그래밍을 알기 위해 기존 명령형 프로그래밍의 특징을 간략하게 알아보겠습니다. 명령형 프로그래밍(Imperative Programming)은 명령어를 명시적으로 지정하여 프로그램 동작 상태를 변경 시키는 프로그래밍 방식 입니다. 프로그램의 동작의 흐름에 중점을 두는 특징이 있습니다.

//DOM에 노출시킬 리스트 변수를 생성한다.
const list = ['foo', 'bar'];

//하위 li 요소를 추가시키기 위한 ul 요소를 생성한다.
const $ul = document.createElement('ul');

//list의 길이 만큼 순회하며 listItem 요소를 생성
for (let index = 0; index < list.length; index++) {
  const item = document.createTextNode(list[index]);
  const $listItem = document.createElement('li');

  $listItem.appendChild(item);
  $ul.appendChild($listItem);
}

//html body에 렌더링
document.body.appendChild($ul);

위의 예시 코드는 명령형 방식의 리스트를 렌더링해주는 코드 입니다. 명령형 코드의 특징은 다음과 같습니다.

별도의 모듈 분리 없이 연속적인 계산 과정으로 이루어져 있어 실행 속도가 빠릅니다.
세부적인 동작 사항이 명령문의 연속으로 구성되어 있기 때문에, 복잡도가 증가할 수록 이해하는 데 시간과 비용이 상대적으로 더 많이 들 수 있습니다.
기능을 변경할 때 변수 값 할당/수정이 불가피하게 필요하기 때문에, 실행 흐름과 부수 효과(Side Effect)에 영향을 미칠 수 있습니다.

요약하자면, 간단하고 단순 계산 애플리케이션에는 빠른 실행과 가독성으로 인한 장점이 있지만, 복잡한 애플리케이션일 수록 관리가 어렵다는 특징이 있습니다.

선언형 프로그래밍

이제 선언형 프로그래밍의 특징을 말씀드리도록 하겠습니다. 선언형 프로그래밍은 추상화 계층과 제어 흐름을 명시적으로 지정하지 않고, 프로그램이 수행하는 작업을 설명하는 데 중점을 둔 패러다임 입니다. JavaScript에서는 명령형 프로그래밍으로 작성된 코드를 추상화를 통해 선언형 코드로 변환할 수 있습니다. (다중 패러다임 언어)

추상화를 통한 선언형 프로그래밍

//DOM에 노출시킬 리스트 변수를 생성한다.
const list = ['foo', 'bar'];

//요소를 생성한다.
const createElement = (element) => {
  return document.createElement(element);
};

//list의 길이 만큼 순회하며 listItem 요소를 생성
const createListItem = (list) => {
  const $ul = createElement('ul');
  list.forEach((item) => {
    const $item = createElement('li');
    $item.appendChild(document.createTextNode(item));
    $ul.appendChild($item);
  });
  return $ul;
};

//렌더링한다.
const render = (element, attachElement) => {
  return attachElement.appendChild(element);
};

render(createListItem(list), document.body);

위에 작성했던 코드를 선언형 코드로 재구성해보았습니다. 별도의 함수로 분리하여 추상화를 하였으며, 이는 곧 재사용성이 증가한다는 특징을 갖게 되었습니다. 선언형 프로그래밍의 특징은 추상화 레벨이 높을수록, 사용하는 입장에서는 내부를 신경쓰지 않아도 됩니다.

높은 레벨의 추상화

//render
const render = (initialState, createElement) => {
  const renderToApp = (element) => {
    const $app = document.getElementById("app");
    $app.innerHTML = element;
  };

//setState함수를 호출하는 순간 renderToApp 호출
  const setState = (state) => {
    renderToApp(createElement(state, setState));
  };

  setState(initialState);
};

//render 호출
render({ list: ["foo", "bar"] }, (state, setState) => {
    setState({ list: [...state.list, "jiny"] });
    return `<ul>
        ${state.list.map((item) => {
          return `<li>${item}</li>`;
        })}
    </ul>`;
  });
});

추상화 레벨이 높을수록, 호출하는 부분에서 구체적인 동작에 대한 정보를 알 필요가 없어집니다. (가독성과 이해도 향상)
추상화된 함수를 재사용함으로써 선언적인 코드를 사용할 수 있습니다.
함수 호출 방식으로 인해 메모리 할당량이 증가하는 단점은 있습니다.

React와 선언형 프로그래밍

이제 위 명령형과 선언형 패러다임을 이해하고, React에서 설명하고 있는 선언형의 장점을 살펴보겠습니다. React에서는 사용자가 UI를 상황에 따라 어떻게 표현할지 선언만 하면 되며, 선언적인 코드로 작성되어 있어 UI 업데이트는 React 내부에서 처리됩니다. 만약에 이 방식을 명령형 프로그래밍으로 작성한다면 어떻게 될까요?

/** 간단한 텍스트 폼을 제출하는 UI */

const loadingMessage = '로딩중입니다..';
const successMessage = '제출을 성공하였습니다.';
const $form = document.getElementById('form');
const $textarea = document.getElementById('textarea');
let $status = document.getElementById('status');

//display 상태 관리
const setHideElement = (element, state) => {
  element.style.display = state ? 'none' : '';
};

//text 상태 관리
const setStatusElementText = (element, state) => {
  element.textContent = state;
};

//network 상황을 가정한 form 제출
const fetchForm = (formText) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (formText.length) {
        resolve();
        return;
      }
      reject(new Error('Form text is empty'));
    }, 2000);
  });
};

//submit event
const handleSubmit = async (e) => {
  e.preventDefault();
  setHideElement($status, false);
  try {
    await fetchForm($textarea.value);
    setStatusElementText($status, `${successMessage} 내용: ${$textarea.value}`);
  } catch (error) {
    setStatusElementText($status, error.message);
  }
};

$form.onsubmit = handleSubmit;

이렇게 UI 상태를 표현하는 것도 이미 코드가 복잡한데, 더 복잡한 UI일수록 상태 별 표현해야하는 관리 소스는 더욱 복잡해지게됩니다. 이를 해결하기 위해, React에서는 여러 경우의 하나의 상태로 두면서 데이터 흐름을 단방향 컴포넌트로 흐르게 하였습니다. 이러한 패턴을 Single Source of Truth라고 합니다.

각각의 UI별 상태를 명령형 코드로 구성했을 때 상태 관계와 참조하는 DOM Tree 구조는 복잡해져 관리하기 어려워집니다.
새로운 UI 요소나 상호작용을 위한 이벤트를 수정하거나 추가하려면 기존 상호작용이 잘 이루어져있는지 세밀한 디버깅이 필요로하게됩니다.

React가 제시한 선언적 UI 제어

prop을 활용한 시각 상태 식별

컴포넌트를 사용하면 props을 통해 다양한 UI 상태를 식별할 수 있습니다. React에서는 이미 높은 추상화 수준을 달성했기 때문에, 사용자는 JSX 문법을 통해 UI 상태를 제어하기 위한 속성 값과 상태별로 어떻게 표현할지 작성하기만 하면 됩니다.

export default Form = ({ status = 'empty' }) => {
  if (status === 'success') {
    return <h1>이미 폼을 제출하였습니다.</h1>;
  }
  return (
    <>
      <h2>Form</h2>
      <form>
        <textarea disabled={status === 'submitting'} />
        <br />
        <button disabled={status === 'empty' || status === 'submitting'}>Submit</button>
        {status === 'error' && <p className="Error">에러가 발생하였습니다.</p>}
      </form>
    </>
  );
};

위의 컴포넌트 코드는 내부적으로 아래와 같이 변환이 됩니다.

const Form = ({ status = 'empty' }) => {
  if (status === 'success') {
    return React.createElement('h1', null, '이미 폼을 제출하였습니다.');
  }
  return React.createElement(
    React.Fragment,
    null,
    React.createElement('h2', null, 'Form'),
    React.createElement(
      'form',
      null,
      React.createElement('textarea', { disabled: status === 'submitting' }),
      React.createElement('br'),
      React.createElement('button', { disabled: status === 'empty' || status === 'submitting' }, 'Submit'),
      status === 'error' && React.createElement('p', { className: 'Error' }, '에러가 발생하였습니다.')
    )
  );
};

export default Form;

선언적인 hook을 통한 상태 제어

React에서는 hook을 통해서 컴포넌트 간 상태들을 공유하고, 상태 제어를 할 수 있습니다. 이 부분이 어떻게 선언형으로 이루어져있는지 살펴보도록하겠습니다.
ui-state 우선 상태 관리는 왜 필요할까요? 웹에서는 상태 변화가 발생하는 상황은 크게 다음과 같습니다.

요소 클릭, form 제출 등 사용자 행위에 의한 UI 상태 변화
HTTP 요청 및 응답과 같은 컴퓨팅 요소에 의한 UI 상태 변화

이와 같이 컴포넌트 별 발생하는 여러 상태 변화를 React에서는 hook을 통해 상태 변수를 유지시킬 수 있습니다. useState를 통해 상태 제어를 선언할 수 있으며, useEffect를 통해 React 생명주기에서 일어나는 상태 변화도 감지할 수 있습니다.

const [inputContent, setInputContent] = useState('');
const [error, setError] = useState(null);

hook의 특징은 다음과 같습니다.

컴포넌트 함수 내에서 렌더링 간 상태를 유지시키고 보관한다.
각 상태 변수의 인스턴스는 고립되어 있으므로, 각 컴포넌트에서 상태 변수를 선언하고 여러 번 호출하여 상태를 변경하더라도 다른 컴포넌트에게 영향을 주지 않습니다.

상태 설정 함수를 통해 변수 업데이트와 컴포넌트 리렌더링을 발생
React에서는 hook 호출 규칙을 통해 상태를 체계적으로 관리합니다. 이를 통해 메모리와 hook의 연관성을 유지할 수 있습니다.

사용자는 React에서 제공된 hook을 사용하기만하면 됩니다. 물론, React 내부에서는 아래와 같이 상태 감지를 위해 useState 함수를 구현해놓았습니다.

//react@16.13.1/
function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

//react-dom@16.13.1
function mountState(initialState) {
  var hook = mountWorkInProgressHook();

  if (typeof initialState === 'function') {
    // $FlowFixMe: Flow doesn't like mixed types
    initialState = initialState();
  }

  hook.memoizedState = hook.baseState = initialState;
  var queue = (hook.queue = {
    pending: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: initialState
  });
  var dispatch = (queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue));
  return [hook.memoizedState, dispatch];
}

resolveDispatch() 함수는 현재 렌더링 중인 컴포넌트에 대한 내부 참조를 반환합니다. 이 함수를 통해 컴포넌트가 마운트될 때 mountState 함수를 호출하고, 렌더링될 때 updateState 함수를 통해 상태를 변경시킵니다.

중요한 것은 모두 내부적으로 일어나고 있는 일이기 때문에 모든 과정을 알 필요가 없습니다. 높은 레벨의 추상화를 통한 선언적 코드를 이루고 있기 때문에 개발자는 인터페이스 규칙에 맞춰 편하게 사용만 하면 됩니다.

React가 선언적임으로써 얻게된 장점들

가독성과 유지보수성

개발자는 원하는 UI의 최종 상태를 선언적으로 작성하고, React는 내부적으로 해석하여 UI를 업데이트합니다. 이를 통해 코드의 의도 파악이 쉬워지며, 변경 사항에 대한 수정이 용이해져 유지 보수성이 향상됩니다.

재사용성

선언적인 코드는 독립적인 컴포넌트로 구성되어 있으며, 상태가 변경되어 있더라도 고립된 인스턴스 hook을 통해 다른 부분에서 재사용하는 데 문제가 없습니다.

효율적인 관리

React는 선언적 API를 제공하기 때문에 업데이트할 때마다 무엇이 변경되는지에 대해 신경 쓸 필요가 없습니다. reconciliation 과정을 통해 자체적인 diff 알고리즘으로 서로 다른 트리를 비교하고 갱신합니다.

개요