선언적인 코드 작성하기

🗣️ '선언적인 코드'에 대해서 들어보셨나요?

 

들어는 봤는데.. 뭐지?

 

토스 프론트엔드 챕터에서는 선언적인 코드 (Declarative Code)를 추상화 레벨이 높아진 코드라고 생각한다고 한다.

 

추상화 레벨이 높아진 코드란? 

 

다음과 같이 배열의 합을 구하는 함수 sum을 살펴보자.

 

sum([1,2,3]);


// sum 함수의 구현 

function sum(nums: number[]) {
  let result = 0;

  for (const num of nums) {
    result += num;
  }

  return result;
}

 

sum 함수의 초기값은 0이고, for문을 돌면서 배열의 각 수를 더하고,

더해진 결괏값을 리턴해준다.

 

이 작업이 추상화되어,  sum 함수를 사용하는 사람은 내부의 복잡한 제어 흐름에 대한 이해 없이

배열의 합을 구하는 동작에 집중하여 함수를 사용할 수 있다.

 

즉, 선언적인 코드는 내부의 제어 흐름이 추상화되어 

동작에 집중할 수 있는 코드라고 볼 수 있다.

  // for of 문도 선언적인 코드다.
  
  for (const num of nums) {
    result += num;
  }
  
  // 내부적으로 배열의 각 요소를 순회하는 동작이 추상화된 것이다.
  
  const iterator = nums[Symbol.iterator](); // Iterator 생성하고

    let step;
	
    while (!(step = iterator.next()).done) {	// Iterator가 없을 때까지
      const num = step;		// 다음 요소를 차례로 가져온다
      /* 동작 ... */
    }
// iterator 삭제 동작 생략..

 

항상 들어왔던 silver bullet은 없다는 말은 선언적인 코드를 쓸 때에도 적용된다.

토스에서는 좋은 코드를 판단하기 위한 원칙들이 있는데 그 중 제1원칙은 다음과 같다.

 

"수정하기 쉬운 코드"

 

비즈니스 요구 사항은 항상 빠르게 변하고, 개발자는 이에 신속하게 대응을 해야 하기 때문에 

선언적 코드를 수정하기 쉬운 경우와 그렇지 않을 경우가 있을 수 있습니다.

<SignUpForm
  onSubmit={result => {
    /* 회원가입 결과에 따라서 특정 동작 수행 ... */
  }}
/>​

 

😁 쉬운 경우 : 회원 가입 폼을 여러 곳에서 사용한다면 재사용할 수 있기 때문에 효율적이다.

재사용했기 때문에, 한 곳만 수정하면 다른 곳에도 반영되어 빠르게 작업이 가능하다.

 

😖 그렇지 않을 경우 : 화면마다 SignUpForm이 조금씩 다르다면 공통화된 것이 오히려 코드의 복잡함을 가져올 수 있다.

예를 들면, SNS 회원가입을 일반 이메일 회원 가입보다 먼저 보여줘야 하거나,

페이지마다 텍스트나 스타일이 조금씩 달라져야 하는 경우 어 뭐야 vinylify 카드 컴포넌트이야기 같은데?

 

아래와 같이 SignUpForm는 단순히 회원 가입을 담당하는 역할뿐만 아니라,

바뀔 수 있는 부분까지 반영해서 내부 구현과 인터페이스가 복잡해지고, 사용하는 사람 입장에서도 불편해진다.

<SignUpForm
  signUpOrder={['sns', 'normal']
  title="사이트에 어서 오세요"
  subtitle="먼저 회원가입을 해주세요."
  primaryButtonColor={colors.blue}
  secondaryButtonColor={colors.grey}
  /* 많은 Prop 들 ... */
  onCancel={/* ... */}
  onSubmit={result => {
    /* 회원가입 결과에 따라서 특정 동작 수행 ... */
  }}
/>

 

따라서, 선언적인 코드는 코드의 어떤 부분이 수정될지 예측하고, 적절한 선언 레벨을 따르는 코드를 작성해야 한다.

 

토스 프론트엔드 챕터에서 자주 사용하고 있다는 선언적 라이브러리 유틸리티인 useOverlay를 살펴보자.

 

const overlay = useOverlay();

// '바텀시트 열기' 버튼을 클릭하면 위와 같은 overlay가 열린다.

<button
  onClick={() => {
    overlay.open(({ isOpen, close }) => {
      return (
        <BottomSheet open={isOpen} onClose={close}>
          나는 바텀시트야
        </BottomSheet>
      );
    })
  }}
>
  바텀시트 열기
</button>

// useOverLay가 없다면 제어 흐름을 노출시켜야한다.

const [isSheetOpen, setIsSheetOpen] = useState(false);

<button onClick={() => setIsSheetOpen(true)}>
  바텀시트 열기
</button>
<BottomSheet open={isSheetOpen} onClose={() => setIsSheetOpen(false)}>
  나는 바텀시트야
</BottomSheet>

 

 

또 다른 선언적 라이브러리 유틸 컴포넌트인 ImpressionArea는

어떤 영역이 보이거나 숨겨지면 요소를 보여주는 역할을 한다.

 

<ImpressionArea onImpressionStart={() => { /* 보여졌을 때 실행 */ }}>
  <div>내가 보여졌으면 onImpressionStart가 실행돼</div>
</ImpressionArea>

// ImpressionArea는 복잡한 IntersectionObserver API나
// 복잡한 Scroll 이벤트 핸들러 로직을 사용할 필요 없이 보여졌을 때의 동작에만 집중하면 된다.

 

 마지막으로 토스는 데이터 주도 의사결정을 위해 화면에 진입하는 사용자의 수,

그중 몇 명이 버튼을 누르는 지를 기록하는 경우가 있는데,  LoggingClick 컴포넌트는 

이 누르는 동작에 대한 기록을 추상화하는 역할을 한다.

 

<LoggingClick params={{ price }}>
  <button onClick={buy}>사기</button>
</LoggingClick>

// LoggingClick 컴포넌트가 없다면 
<button
  onClick={() => {
    log({ title: '사기', price });
    buy();
  }}
>
  사기
</button>

📚 References

선언적인 코드 작성하기

useOverlay | Slash libraries

https://www.slash.page/libraries/react/impression-area/src/impressionarea.i18n/

 

🤔 TMI, 느낀 점

오늘은 토스가 생각하는 선언적 코드에 대해서 살펴봤다.

좋은 선언적 코드는 추상화가 잘 된 코드이다. 즉, 내부 로직 흐름을 파악하는데 신경을 쓸 필요 없이, 내가 하고자 하는

동작에만 집중하면 돼서 쓰는 사람 입장에서 편리할 수 있는 코드다.

하지만, 상품이 어떻게 확장될 지에 대한 고민 없이 지나치게 추상화를 하면 수정하기 번거롭고 어려운 코드를 만들 수 있다.

추상화를 할 범위에 대한 고민이 필요한 것 같다. LoggingClick, ImpressionArea, useOverlay 모두 하나의 역할을 담당한다는 공통점이 있는 거 같다.

LoggingClick은 클릭 시 로깅만,

ImpressionArea는 내부적으로 IntersectionObserver를 사용해서 감지하는 역할만, 

useOverlay는 toast ui 같은 역할 (클릭 시에 토스트 보여주고, 닫을 때 사라지게 해 주기)을 한다.