명령형 프로그래밍과 선언형 프로그래밍(how / what)

Issue

선언형
React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요.
그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

 

다음 설명은 리액트 공식 사이트에 처음 들어가면 메인 페이지에서 바로 확인할 수 있다.

여기서 말하는 선언형이 정확히 어떤 의미를 지니고 있는지, 실제 코드 필자의 코드와 함께 살펴보고자 한다.

 

명령형 프로그래밍과 선언형 프로그래밍

명령형 프로그래밍은 어떻게 할 것인가, 선언형 프로그래밍은 무엇을 할 것인가

 

 

명령형 프로그래밍(Imperative Programming)은 어떤 방법(How)으로 할 것인지에 가깝다.

알고리즘(동작 방식)을 명시하지만 목표(실제 동작)를 명시하지 않는다.

 

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Comments extends Component {
  render() {
    let { name, comment } = this.props;

    let isSkip = false;
    let addVal;
    if (comment.length > 20) {
      comment = comment.slice(0, comment.length - 6);
      isSkip = true;
      addVal = (
        <span style={{ color: '#dee2e6', fontSize: '6px' }}> 더보기...</span>
      );
    }

    return (
      <li className="comment-item">
        <div className="comment">
          <Link to="/login/choi" className="feed-bottom-account profile-name">
            {name}
          </Link>
          <span className="comment-content">{comment}</span>
          {isSkip && addVal}
        </div>
        <button className="comment-heart">
          <img
            src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png"
            alt="heart"
          />
        </button>
      </li>
    );
  }
}

export default Comments;

해당 코드는 이전 포스팅에서 쓰였던 댓글 관련 컴포넌트이다.

이 코드 상에서 로직 상 문제는 없기 때문에 기능 동작은 제대로 이루어진다.

 

하지만 선언형을 지향하는 리액트 상에서 위와 같은 코드에선 지양해야 할 부분이 있다.

render()는 기본적으로 실제 화면 상에 보여질 구성(레이아웃)을 반환하는 약속 된 함수이다. 

 

이러한 함수에서 아래와 같은 연산 과정은 실제 render() 함수가 목표하는 바와 직접적으로 상관이 없을 뿐만 아니라, 기능의 흐름만을 명시하고 있어 'So What?' 이라는 의문을 자아낸다.

let isSkip = false;
    let addVal;
    if (comment.length > 20) {
      comment = comment.slice(0, comment.length - 6);
      isSkip = true;
      addVal = (
        <span style={{ color: '#dee2e6', fontSize: '6px' }}> 더보기...</span>
      );
    }

 

그렇다면 해당 함수를 어떠한 식으로 수정해주면 좋을까.

이에 대한 해답을 내리기 전에 선언형 프로그래밍에 대해서 되짚고 넘어갈 필요가 있다.

 

선언형 프로그래밍(Declarative Programming)은  무엇인가(What)을 작업하기 위한 방법을 정의하는 것을 의미한다.

제어 흐름을 설명하지 않고 계산 논리에 집중하는 프로그래밍 패러다임이다.

 

즉, 결과에 이르는 과정은 기술하지 않고 결과만 기술할 뿐이다.

(사용자의 의도에 집중한 프로그래밍 기법이다)

 

위 내용과 관련되어 다른 예시를 살펴보자.

goPath = event => {
    if (event.type === 'keyup' && event.keyCode !== 13) return;

    let { id, pwd } = this.state;
    let { history } = this.props;

    fetch('API 주소', {
      method: 'POST',
      body: JSON.stringify({
        email: id,
        password: pwd,
      }),
    })
      .then(res => res.json())
      .then(res => {
        if (res.message === 'SUCCESS') {
          history.push('/main/choi');
        }
      });
  };

해당 goPath() 함수는 버튼을 클릭하거나 엔터키를 쳤을 때, API 주소로 로그인 처리를 하는 함수이다.

해당 함수를 리팩토링해보며 선언형 프로그래밍에 대해서 학습해보자.

 

선언형 프로그래밍_함수명의 변경과 기능 분리

현재 함수명은 goPath 이다. 

처음에 함수명을 이와 같이 짓은 이유는 '로그인 처리가 성공이 되면 path에 지정된 메인 페이지로 라우팅되는 동작' 이기 때문이다.

 

하지만 '로그인 처리가 성공되지 않으면 메인 페이지로 이동하지 않는다' 라는 동작을 생각했을 때, 해당 goPath는 보장된 행동 결과가 아니다.

해당 부분을 좀 더 명확히 해주기 위해 'goPath' 함수명을 'checkLoginUser' 로 바꾸어 주었으며, 실제 라우팅되는 기능을 다른 함수로 분립하여 주었다.

checkLoginUser = event => {
    if (event.type === 'keyup' && event.keyCode !== 13) return;

    let { id, pwd } = this.state;
    let { history } = this.props;

    fetch('http://10.58.1.129:8000/users/login', {
      method: 'POST',
      body: JSON.stringify({
        email: id,
        password: pwd,
      }),
    })
      .then(res => res.json())
      .then(res => {
        if (res.message === 'SUCCESS') {
        this.goMain(); // 지정된 path로 라우팅해주는 기능을 하는 함수 호출
        }
      });
  };

goMain = () => { history.push('/main/choi'); }

또한 이벤트 타입과 이벤트 keyCode를 식별해주기 위해

if (event.type === 'keyup' && event.keyCode !== 13) return;

다음과 같은 연산 과정이 있는데, 이 또한 논리의 흐름만 있을 뿐이지 어떠한 동작을 하는지에 대해서는 명시하지 않기 때문에 선언형 프로그래밍 형식으로 리팩토링해줘야 한다는 생각이 들었다.

const eventType = 'keyup';
const isEnterKey = 13;

if (event.type && !isEnterKey) return;

아직까지는 선언형 프로그래밍을 중점으로 코드를 구성하는 것이 어렵지만, 앞으로는 코드를 작성할 때 항상 유의하고 있어야 한다는 생각이 들었다.