'선언적인 코드 작성하기' 문서 제안

[jungpaeng]

패턴 제목

선언적인 코드 작성하기

문서 위계

예측 가능성 > D. 선언적인 코드 작성하기

개요

프론트엔드 그리고 리액트 생태계에서 선언적인 코드는 자주 등장하는 개념이에요.

선언적인 코드를 작성하면 코드를 읽는 사람과 시스템 모두 '무엇이' 실행될 지 명확히 파악할 수 있기 때문에 코드의 의도가 더욱 명확히 드러날 수 있다고 생각해요.

예를 들어, number[] 배열에서 짝수만 필터링할 때, for 문과 if 문을 조합하는 방법보다 Array.filter를 활용하는 방식이 더욱 직관적이고 자주 사용돼요.

이처럼 선언적 프로그래밍은 보다 가독성이 높은 코드를 작성함으로서 예측가능성을 크게 높일 수 있고, React가 '선언형 뷰'를 강조하는 만큼 프론트엔드 개발자들에게 중요한 개념이라 할 수 있어요.

내용

선언적이지 않은 코드는 구체적인 제어 흐름을 개발자가 직접 관리해야 해서 코드가 산발적이고 복잡해질 수 있어요.
리액트를 예시로 들면, 선언적이지 않은 코드는 UI와 상태 업데이트를 수동으로 관리해야 하므로 유지보수가 어려워져요.

📝 코드 예시

다음 코드는 별도 라이브러리 없이 자바스크립트로 DOM을 직접 조작하는 예시에요.
간단한 페이지를 만들어서 별도의 라이브러리를 추가할 필요성을 느끼지 못할 때 자바스크립트를 사용한다는 결정을 내릴 수 있어요.

button.addEventListener('click', () => {
  if (box.classList.contains('inactive')) {
    box.classList.remove('inactive');
    box.classList.add('active');
  } else {
    box.classList.remove('active');
    box.classList.add('inactive');
  }
});

👃 코드 냄새 맡아보기

이 코드는 버튼 클릭시 상태를 직접 확인하고 DOM 클래스를 수동으로 변경해요.
이러한 명령형 방식은 여러 상태 변경 로직이 중첩되거나 다른 이벤트와 연관될 때, 어떤 시점에 어떤 상태가 될지 예측하기 힘들게 만들어요.

예를 들어, 코드 수정이나 추가 기능 도입시에 현재 상태와 관련된 side effects가 의도치 않게 발생할 수 있어 유지보수가 힘들어질 수 있어요.

✏️ 개선해보기

A. 선언적인 코드로 변경하기

아래와 같이 선언적인 코드를 사용하면 isActive라는 단일 상태 변수에 UI의 상태를 저장하므로 UI가 이 상태를 그대로 반영할 수 있어요. 이는 현재 UI가 어떤 상태인지 쉽게 예측할 수 있게 해요.

let isActive = false;

function render() {
  box.className = isActive ? 'active' : 'inactive';
}

button.addEventListener('click', () => {
  isActive = !isActive;
  render();
});

더 개선할 수 있는 방법은 없을까요?
위 코드는 상태 변경 후에 수동으로 render 함수를 호출해 DOM을 업데이트하기 때문에, 개발자가 상태와 UI 간의 동기화를 신경써야 하는 부담이 남아있어요.

이로 인해 상태 변경에 따른 side effect 누락 등의 문제가 발생할 수도 있어요.

import React, { useState } from 'react';

function ToggleBox() {
  const [isActive, setIsActive] = useState(false);
  return (
    <>
      <div className={isActive ? 'active' : 'inactive'}>상태 표시</div>
      <button onClick={() => setIsActive(!isActive)}>Toggle</button>
    </>
  );
}

위의 예시처럼 React를 함께 사용한다면 상태가 변경될 때마다 컴포넌트가 자동으로 다시 렌더링되면서 UI와 상태가 항상 일치하게 돼요.

B. 오버레이를 더욱 선언적으로 작성하는 방법

A. 선언적인 코드로 변경하기 에서 DOM 으로 작성하는 것보다 리액트를 사용하는 것이 어떻게 더 선언적으로 추상화되는지 살펴보았어요.

예를 들어, 다음은 React로 오버레이를 구현한 기본적인 예시예요.

import { useState } from 'react';
 
function MyPage() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setIsOpen(true)}
      >
        Open
      </Button>
      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
      />
    </>
  );
}

이 코드에서는 isOpen 상태에 따라 Dialog 컴포넌트가 자동으로 열리고 닫히기 때문에, 상태와 UI 간의 관계가 명확해요.

반면, 아래와 같이 overlay-kit 라이브러리를 사용한다면 개발자는 오버레이의 상태 관리를 직접 하지 않아도 돼요.

import { overlay } from 'overlay-kit';
 
function MyPage() {
  return (
    <Button
      onClick={() => {
        overlay.open(({ isOpen, close }) => {
          return <Dialog open={isOpen} onClose={close} />;
        });
      }}
    >
      Open
    </Button>
  );
}

이 방식은 내부적으로 오버레이의 상태와 렌더링 로직을 추상화하여 관리하므로 개발자는 단순히 JSX를 통해 오버레이의 UI를 선언하는 데 집중할 수 있어요.

즉 두 방식 모두 선언적 접근을 사용하지만,

• React의 기본 예시는 상태를 직접 관리하더라도 컴포넌트 재렌더링에 의해 선언적 UI 구성이 이루어지고,
• overlay-kit 예시는 오버레이와 관련된 상태 관리와 side effect를 라이브러리 내부로 완전히 감추어, 더욱 선언적인 코드를 작성할 수 있게 해줘요.

[jungpaeng]

🍂

[Kimbangg]

@jungpaeng 님 안녕하세요.
선언적 접근을 통해, 명령형(또는 절차형) 개발 방식이 가진 복잡도를 낮추는 방식은 훌륭한 전략이라고 생각합니다.

다만, 해당 내용은 기존에 작성이 되어있는 구현 상세 추상화하기 의 하위 내용으로 작성이 될 수도 있을 것 같은데요.

1. 별도 섹션을 분리해서 설명하고 싶으신 이유가 있을까요?
2. 가능하다면 구현 상세 추상화하기 하위 카테고리의 예시로 작성해볼 수는 없을까요?

[jungpaeng]

리뷰해주셔서 감사합니다.
구현 상세 추상화하기의 하위 내용으로 작성해보도록 하겠습니다!