uni-icons 컴포넌트의 데이터 바인딩 동작 차이

uni-icons를 사용할 때 속성에 데이터를 직접 바인딩하면 웹 브라우저에서는 정상 작동하지만, WeChat Mini Program 시뮬레이터나 실제 기기에서는 렌더링 문제가 발생할 수 있습니다. 이를 방지하기 위해서는 아이콘 태그 외부에서 데이터를 처리하거나 속성값을 안전하게 분리하는 것이 좋습니다.

<view class="icon-wrapper">
  <uni-icons type="person" size="24"></uni-icons>
  <text>{{ displayText }}</text>
</view>

콜백 함수 내에서의 this 컨텍스트 바인딩 문제

Vue 2 환경의 비동기 API(예: uni.getStorage) 콜백 함수에서 일반 함수를 사용하면 this가 Vue 인스턴스를 가리키지 않는 문제가 발생합니다. ES6의 화살표 함수(Arrow Function)를 사용하여 상위 스코프의 this를 유지해야 합니다.

uni.getStorage({
  key: 'app_token',
  success: (res) => {
    // 화살표 함수를 사용하여 this가 Vue 인스턴스를 가리키도록 함
    this.localToken = res.data;
    console.log('Retrieved token:', res.data);
  },
  fail: (err) => {
    console.error('Storage access failed', err);
  }
});

Flexbox 레이아웃의 정렬 속성 호환성

CSS Flexbox를 사용하여 요소를 우측 정렬할 때 justify-content: right 속성은 웹 브라우저에서는 작동할 수 있으나, WeChat Mini Program 환경에서는 무시될 수 있습니다. 대신 flex-end 값을 사용하여 크로스 플랫폼 환경에서 모두 정상적으로 정렬되도록 구현해야 합니다.

.action-container {
  display: flex;
  justify-content: flex-end; /* 'right' 대신 'flex-end' 사용 권장 */
}

<view class="action-container">
  <button type="default" size="mini">삭제</button>
</view>

Button 컴포넌트의 너비 제어 이슈

uni-app의 button 컴포넌트는 기본적으로 내부에 padding과 margin이 포함되어 있어, CSS로 직접 width를 조절하려 할 때 의도대로 동작하지 않는 경우가 많습니다. 버튼 컴포넌트 자체에 스타일을 적용하는 대신, 부모 view 요소로 감싸고 부모의 레이아웃 속성을 통해 간접적으로 크기를 제어하는 것이 효과적입니다.

<!-- 부모 뷰를 통해 버튼의 영역 제어 -->
<view class="btn-wrapper">
  <button type="primary">확인</button>
</view>

v-for와 v-if의 동시 사용에 따른 렌더링 오류

uni-card와 같은 컴포넌트에 v-for와 v-if를 동시에 적용하면, 특정 조건부 필터링 로직이 정상적으로 작동하지 않거나 렌더링 순서 꼬임 현상이 발생할 수 있습니다. 이를 해결하기 위해 v-if 조건을 내부에 두거나, 상위 view 태그에서 v-for를 수행하고 내부에서 v-if로 필터링하는 구조로 변경해야 합니다.

<!-- 상위 view에서 루프를 돌고 내부에서 조건을 처리 -->
<view v-for="(item, index) in itemList" :key="item.id">
  <uni-card v-if="!item.isArchived" :title="item.subject">
    <text>{{ item.description }}</text>
  </uni-card>
</view>

export default {
  data() {
    return {
      itemList: [
        { id: 101, subject: 'Project A', description: '...', isArchived: false },
        { id: 102, subject: 'Project B', description: '...', isArchived: true }
      ]
    };
  }
};

라이프사이클 훅 작성 시 화살표 함수 사용 지양

Vue 2의 라이프사이클 훅(예: mounted, created)을 화살표 함수로 정의하면, this가 상위 컨텍스트를 가리키게 되어 Vue 인스턴스의 데이터나 메서드에 접근할 수 없게 됩니다. 반드시 일반 함수 선언식을 사용하여 this가 컴포넌트 인스턴스에 바인딩되도록 해야 합니다.

export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  // 정상: 일반 함수 선언 사용
  mounted() {
    console.log(this.message); // 'Hello' 출력
  }
};