Frontend study 일지 #1 - 비즈니스 로직 편

이전 포스팅의 보충 글로 react 비즈니스 로직에 대한 내용에 대해 짧게 정리해보았다.

< 비즈니스 로직 >

핵심 키워드는 "관심사의 분리".

동일한 책임과 역할에 따라 함수를 분리함으로써 코드의 재사용성과 가독성, 유지보수성을 높일 수 있다.

hooks 등장 이전에는 많은 개발자들은 이것을 Presentational(UI) + Container(비즈니스 로직=비동기 처리, 상태 변화 등) 패턴으로 만들었었다. Container에서 데이터를 받아 만든 반환값을 props로 자식인 Presentational 컴포넌트에게 내려서 렌더링하게 하는 디자인 패턴이다.

하지만 hooks 등장 이후에는 더는 권장되지 않으며, 비즈니스 로직을 Container 형태가 아닌 custom hook으로 분리하는 패턴이 권장된다.

< 명령형 프로그래밍 vs 선언적 프로그래밍 >

• 명령형 프로그래밍(imperative programming) = "어떻게" 하느냐?

  쉽게 말하면 일일히 자세하게 어떻게 동작하는지를 나열하는 것이다. 과정을 보면 이것이 어떤 동작을 하는지에 대한 정보를 얻을 수 있는 코드를 지칭하는 것 같다. = 본인이 처음 JavaScript를 공부할 때 많이 작성한 코드 스타일이었다.

  //~.html
  <button id='btn'>버튼</button>
  
  //~.js
  const button = document.selectById('#btn');
  button.addEventListner('onclick', () => { alert('클릭') });
  `
  

• 선언형 프로그래밍(declarative programming) = "무엇을" 하느냐?

  쉽게 말하면 JavaScript 내장 메서드를 사용할 때와 같다. 만약 처음 map을 본 경우, map이 어떻게 반환값을 만들었는지에 대한 자세한 로직은 숨겨져 있기 때문에 무슨 일이 일어났는지 전혀 알 수 없다. 하지만 map이 '배열의 모든 요소를 순회하여 콜백함수를 거친 결과값을 모아 새로운 배열을 반환' 한다는 것을 알고 나면 이후 부터 자유롭게 사용할 수 있다.

  결국 자세한 동작 방식은 숨기고 추상화하여 메서드 이름만 보고도 무엇을 하는지 알 수 있게 코드를 작성하는 방식이라고 할 수 있다.

  <button onClick={openAlert}>버튼<button/>
  
   function openAlert() {
   alert('버튼 클릭');
  }`
   

결론 : UI와 비즈니스 로직을 분리할 때, 로직을 custom hook으로 만들면 더욱 선언형 프로그래밍에 가까워 질 수 있다.
UI와 비즈니스 로직의 분리 기준은 아무것도 모르는 사람이 읽었을 때 이해할 수 있을 정도의 분리가 이상적이며, 무조건 짧게 다 숨긴다고 되는게 아니다. 해당 컴포넌트가 어떤 데이터를 어떻게 렌더링하고 있는지에 대해서는 기본적으로 파악할 수 있도록 하는 것이 좋다고 한다.
참고 : https://blog.leehov.in/57?category=951478