Make Your Components Easier to Think About (컴포넌트에 대해 더 쉽게 생각하기)

💡원본글 : https://michaelnthiessen.com/make-your-components-easier-to-think-about

Make Your Components Easier to Think About

 

나는 생각하는걸 싫어한다.

사실 저는 생각하는 것을 좋아하지만, 문제를 해결하거나 진전을 이룰수 있을때만 생각을 합니다. 하지만 종종 코드가 이를 방해할 때가 있습니다. 한 워크숍 참석자가 코드 읽기에 대해 말했듯이 “만약 혼란스럽다면 너의 잘못이 아닙니다.” 다음의 코드를 더 쉽게 생각하여 혼란을 줄이고 실제 작업을 완료할 수 있는 몇 가지 방법입니다.

가독성을 위한 컴포넌트를 추출하기

사람이 이해하기 쉽도록 컴포넌트를 최적화하는 한 가지 방법은 의도(intention)와 구현(implementation)을 분리하는 것입니다. 이는 새로운 컴포넌트를 만들어야 하는 가장 중요한 이유 중 하나이며, 코드의 일부분을 해당 코드의 기능을 설명하는 코드로 대체할 수 있습니다.

다음은 실제 기본적인 컴포넌트입니다.

<template>
  <div>
    <p>{{ user.name }} ({{ user.age }})</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const user = ref({
  name: 'John Doe',
  age: 28,
});
</script>

UserInfo 컴포넌트를 추출하면 이 한 줄이 하는 일인 사용자 정보를 표시하는 것이 매우 명확해집니다.

<template>
  <div>
    <UserInfo :user="user" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import UserInfo from './UserInfo.vue';

const user = ref({
  name: 'John Doe',
  age: 28,
});
</script>

이 컴포넌트를 만들기 위해서는 몇 가지 보일러 플레이트를 구성해야 합니다.

<template>
  <p>{{ user.name }} ({{ user.age }})</p>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  user: Object,
});
</script>

리팩토링한 코드에서는 사용자 정보를 UserInfo 컴포넌트로 추출했습니다. 이렇게 분리하면 코드가 모듈화가 됩니다. 이제 우리 코드는 좀더 읽기 쉬워집니다. 이것은 간단한 예시이며, 이점은 적습니다. 더 길고 복잡한 컴포넌트에서는 이러한 방식으로 컴포넌트를 추출하면 훨씬 더 많은 이점을 얻을 수 있습니다. 이것은 또한 self-documenting code(스스로 문서화된 코드)를 작성하는 방법의 한 예시이기도 합니다. 이것이 바로 Clean Components Toolkit의 핵심 부분입니다. 모든 패턴, 기술 및 원칙은 “어떻게 하면 코드를 더 설명적으로 만들수 있을까?”라는 질문을 던집니다. 만약 코드를 덜 설명적으로 만드는 패턴을 따르고 있다면 좋은 패턴이 아닐 가능성이 높습니다. 그러나 self-documenting code(스스로 문서화된 코드)는 컴포넌트 이름뿐만 아니라 더 세분화할 수 있습니다.

좀 더 self-documenting code(스스로 문서화된 코드)를 작성하기

Vue 컴포넌트에는 props, data, computed 속성, methods, 라이브사이클 hooks 등등에 대해 명확하고 의미있는 이름이 있어야 합니다. 또한 템플릿 코드가 적절한 들여쓰기, 서식(formatting), 드문 주석을 사용하여 체계적이고 가독성이 좋아야 합니다. 너의 코드가 self-documenting(스스로 문서화된 코드) 되어 있다면 해당 코드가 수행하는 작업의 의도를 알리는데 도움됩니다. 터무니없는 예시일 수도 있지만(누가 이런 코드를 작성하겠어요?) 코드에서 무슨 일이 일어나고 있는지 파악하려면 약간의 노력이 필요하죠.

<template>
  <div>
    <button @click="c">Increment</button>
    <p>{{ a }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const a = ref(0);

function c() {
  a.value++;
}
</script>

맞습니다. counter 입니다. 하지만 다음 예시를 보면 보자마자 무엇인지 즉시 알 수 있습니다.

<template>
  <div>
    <button @click="incrementCounter">Increment</button>
    <p>{{ counterValue }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const counterValue = ref(0);

function incrementCounter() {
  counterValue.value++;
}
</script>

리팩토링된 코드에서는 변수와 메서드의 이름을 더 잘 설명할 수 있도록 개선했습니다. 이제 이 컴포넌트로 돌아올 때마다 시간과 정신적 에너지를 낭비할 필요가 없습니다.

너무 긴 컴포넌트 분할하기

컴포넌트가 너무 많은 일을 하고 너무 길어지면 이해하고 유지 보수 관리하기가 어려울 수 있습니다. 긴 컴포넌트 원칙에 따르면 긴 컴포넌트를 더 작고 집중된 컴포넌트로 나누면 가독성, 재사용성 및 테스트 가능성을 개선하는 데 도움이 됩니다. 다음은 이 모든것을 시도하는 전자상거래 상점의 컴포넌트입니다.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}
        <button @click="addToCart(item)">Add to cart</button>
      </li>
    </ul>
    <div>
      <h2>Cart</h2>
      <ul>
        <li v-for="item in cart" :key="item.id">
          {{ item.name }} - {{ item.price }}
          <button @click="removeFromCart(item)">Remove</button>
        </li>
      </ul>
      <p>Total: {{ totalPrice }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const title = ref('My Store');
const description = ref('Welcome to my store!');

const items = ref([
  { id: 1, name: 'Item A', price: 10 },
  { id: 2, name: 'Item B', price: 20 },
]);

const cart = ref([]);

function addToCart(item) {
  cart.value.push(item);
}

function removeFromCart(item) {
  const index = cart.value.indexOf(item);
  if (index !== -1) {
    cart.value.splice(index, 1);
  }
}

const totalPrice = computed(() => {
  return cart.value.reduce((sum, item) => sum + item.price, 0);
});
</script>

이를 분할하는 데 도움이 되는 Clean Components Toolkit의 컴포넌트 경계 패턴을 사용해 보겠습니다. 이 패턴은 일반적으로 코드에 이미 정의된 경계가 있어 컴포넌트를 분할하는 데 사용할 수 있음을 알려줍니다. 이러한 경계를 찾는 가장 쉬운 방법은 템플릿을 살펴보는 것입니다. 이렇게 하면 추출할 수 있는 세 가지 개별 구성 요소를 찾을 수 있습니다.

• StoreHeader
• ItemList
• Cart

<template>
  <div>
    <!-- StoreHeader -->
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>

    <!-- ItemList -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}
        <button @click="addToCart(item)">Add to cart</button>
      </li>
    </ul>

    <!-- Cart -->
    <div>
      <h2>Cart</h2>
      <ul>
        <li v-for="item in cart" :key="item.id">
          {{ item.name }} - {{ item.price }}
          <button @click="removeFromCart(item)">Remove</button>
        </li>
      </ul>
      <p>Total: {{ totalPrice }}</p>
    </div>
  </div>
</template>

새롭고 간소화된 구성 요소는 다음과 같습니다. 이제 무슨 일이 일어나고 있는지 훨씬 더 쉽게 이해할 수 있습니다.

<template>
  <div>
    <StoreHeader :title="title" :description="description" />
    <ItemList :items="items" @addToCart="addToCart" />
    <Cart :cart="cart" @removeFromCart="removeFromCart" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import StoreHeader from './StoreHeader.vue';
import ItemList from './ItemList.vue';
import Cart from './Cart.vue';

const title = ref('My Store');
const description = ref('Welcome to my store!');

const items = ref([
  { id: 1, name: 'Item A', price: 10 },
  { id: 2, name: 'Item B', price: 20 },
]);

const cart = ref([]);

function addToCart(item) {
  cart.value.push(item);
}

function removeFromCart(item) {
  const index = cart.value.indexOf(item);
  if (index !== -1) {
    cart.value.splice(index, 1);
  }
}
</script>

 

StoreHeader 컴포넌트입니다.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  title: String,
  description: String,
});
</script>

ItemList 컴포넌트입니다.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }} - {{ item.price }}
      <button @click="$emit('addToCart', item)">Add to cart</button>
    </li>
  </ul>
</template>
<script setup>
const props = defineProps({
  items: Array,
});
</script>

Cart 컴포넌트입니다.

<template>
  <div>
    <h2>Cart</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}
        <button @click="$emit('removeFromCart', item)">Remove</button>
      </li>
    </ul>
    <p>Total: {{ totalPrice }}</p>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';

const props = defineProps({
  cart: Array,
});

const totalPrice = computed(() => {
  return props.cart.reduce((sum, item) => sum + item.price, 0);
});
</script>

여기서 트레이드오프를 발견했을수도 있습니다. 하나의 복잡한 컴포넌트를 여러 개의 간단한 컴포넌트로 바꾸는 것입니다. 코드가 조금 더 많아지긴 하지만 이해하기 훨씬 쉽고 유지 관리 및 수정하기 쉬운 코드가 됩니다. 제가 보여드린 예시들 사이에는 통일된 원칙이 있습니다.

가장 멍청하고, 가장 좌절하고, 가장 피곤한 자기자신을 위해. 최적화 하세요.

저는 영리한 코드를 작성하는 경향이 있습니다.(적어도 제가 똑똑하다고 느껴지도록 만들죠.) 하지만 다음날 의욕이 떨어지거나 에너지가 줄어든 상태로 돌아오면 무슨 일이 일어나고 있는지 파악하기 어렵습니다. 우리는 최악의 날에도 이해할 수 있고 생산적으로 작업할 수 있는 명확한 코드를 작성하고 싶습니다. 이는 좋은 이름 지정과 정리, 명확하고 간결한 문서와 예제를 조합하여 달성할 수 있습니다. 또한 일관된 패턴과 규칙을 사용하면 인지적 부하를 줄이고 휴식이나 중단 후에도 프로젝트 작업을 계속하기가 쉬워질 수 있습니다.

결론

사람이 이해할 수 있도록 컴포넌트를 최적화하는 것은 유지보수성, 가독성 및 전반적인 프로젝트 성공을 위해 매우 중요합니다. 올바른 명명 규칙을 사용하고, 컴포넌트 메서드를 추출하고, 코드를 정리하고, 모범 사례를 따르면 Vue 컴포넌트에 더 쉽게 접근하고 작업하기 쉽게 만들수 있습니다. 이 문서에는 몇 가지 방법을 소개했지만, 그 외에도 다양한 방법이 있습니다. Clean Component Toolkit에는 더 나은 Vue 컴포넌트를 작성하는 데 도움되는 패턴, 기술 및 개념과 같은 21가지 도구가 포함되어 있습니다. 각각은 실제 코드 예제에 도구를 적용하는 방법을 보여주는 단계별 리팩터링 예제를 포함하여 매우 상세하게 다룹니다. 따라서 Vue 코드를 개선하는 방법에 대해 자세히 알아보고 싶다면 Clean Components Toolkit을 사용하는 것이 좋습니다.