단일 기능 가져오기

import { useFeature } from 'ibm-appconfiguration-react-client-sdk';

const feature = useFeature('featureId'); // returns undefined incase the featureId is invalid or doesn't exist

if (feature !== undefined) {
  console.log(`Feature Name ${feature.getFeatureName()} `);
  console.log(`Feature Id ${feature.getFeatureId()} `);
  console.log(`Feature Type ${feature.getFeatureDataType()} `);
  console.log(`Is feature enabled? ${feature.isEnabled()} `);
}

모든 기능 가져오기

import { useFeatures } from 'ibm-appconfiguration-react-client-sdk';

const features = useFeatures();
const feature = features['featureId'];

if (feature !== undefined) {
  console.log(`Feature Name ${feature.getFeatureName()} `);
  console.log(`Feature Id ${feature.getFeatureId()} `);
  console.log(`Feature Type ${feature.getFeatureDataType()} `);
  console.log(`Is feature enabled? ${feature.isEnabled()} `);
}

기능 평가

feature.getCurrentValue(entityId, entityAttributes) 메소드를 사용하여 기능 플래그의 값을 평가할 수 있습니다. 이 메소드는 평가를 기반으로 사용 가능/사용 불가능/대체 값 중 하나를 리턴합니다. 리턴된 값의 데이터 유형이 기능 플래그의 데이터 유형과 일치합니다. 고유 entityId을(를) 매개변수로 전달하여 기능 플래그 평가를 수행하십시오.

const entityId = 'john_doe';
const entityAttributes = {
  city: 'Bangalore',
  country: 'India',
};

const feature = useFeature('featureId');
const featureValue = feature.getCurrentValue(entityId, entityAttributes);

여기서:

• entityId: 엔티티의 ID입니다. 기능이 평가되는 엔티티와 관련된 문자열 ID입니다. 예를 들어, 엔티티는 모바일 디바이스에서 실행되는 앱의 인스턴스이거나 웹 애플리케이션에 액세스하는 사용자일 수 있습니다. 엔티티가 App Configuration와 상호동작하려면 고유한 엔티티 ID를 제공해야 합니다.
• entityAttributes: 지정된 엔티티를 정의하는 속성 이름 및 해당 값으로 구성되는 JSON 오브젝트입니다. 기능 플래그가 대상 정의로 구성되지 않은 경우 이는 선택적 매개변수입니다. 대상이 구성된 경우 규칙 평가를 위해 entityAttributes 를 제공해야 합니다. 속성은 세그먼트를 정의하는 데 사용되는 매개변수입니다. SDK는 속성 값을 사용하여 지정된 엔티티가 대상 지정 규칙을 충족하는지 여부를 판별하고 적절한 기능 플래그 값을 리턴합니다.

사용자 지정 메트릭 보내기

실험에서 ' useTrack 훅을 사용하여 사용자 지정 지표를 기록하세요.

import { useTrack } from 'ibm-appconfiguration-react-client-sdk';

export default MyComponent = function () {
    const trackEvent = useTrack();
    return (
        <button onClick={() => trackEvent('clicked', 'user123')}>Buy</button>
    )
}

단일 특성 가져오기

import { useProperty } from 'ibm-appconfiguration-react-client-sdk';

const property = useProperty('propertyId'); // returns undefined incase the propertyId is invalid or doesn't exist

if (property !== undefined) {
  console.log(`Property Name ${property.getPropertyName()} `);
  console.log(`Property Id ${property.getPropertyId()} `);
  console.log(`Property Type ${property.getPropertyDataType()} `);
}

모든 특성 가져오기

import { useProperties } from 'ibm-appconfiguration-react-client-sdk';

const properties = useProperties();
const property = properties['propertyId'];

if (property !== undefined) {
  console.log(`Property Name ${property.getPropertyName()} `);
  console.log(`Property Id ${property.getPropertyId()} `);
  console.log(`Property Type ${property.getPropertyDataType()} `);
}

특성 평가

property.getCurrentValue(entityId, entityAttributes) 메서드를 사용하여 속성 값을 평가합니다. 이 메소드는 평가를 기반으로 기본 특성 값 또는 대체된 값을 리턴합니다. 리턴된 값의 데이터 유형이 특성의 데이터 유형과 일치합니다.

const entityId = 'john_doe';
const entityAttributes = {
  city: 'Bangalore',
  country: 'India',
};

const property = useProperty('propertyId');
const propertyValue = property.getCurrentValue(entityId, entityAttributes);

여기서:

• entityId: 엔티티의 ID입니다. 이는 특성이 평가되는 엔티티와 관련된 문자열 ID입니다. 엔티티가 App Configuration와 상호동작하려면 고유한 엔티티 ID를 제공해야 합니다.
• entityAttributes: 지정된 엔티티를 정의하는 속성 이름 및 해당 값으로 구성되는 JSON 오브젝트입니다. 특성이 대상 정의로 구성되지 않은 경우 이는 선택적 매개변수입니다. 대상이 구성된 경우 규칙 평가를 위해 entityAttributes 를 제공해야 합니다. 속성은 세그먼트를 정의하는 데 사용되는 매개변수입니다. SDK는 속성 값을 사용하여 지정된 엔티티가 대상 규칙을 충족하는지 여부를 판별하고 적절한 특성 값을 리턴합니다.

React 클라이언트 SDK에서 폴백 값 사용하기

App Configuration 연결 오류가 발생하면 SDK는 메모리에 보관된 가장 최근에 평가된 플래그 값을 사용합니다. 그러나 메모리에 이전 값이 없는 경우 사용자가 코드 내에 폴백 값을 설정하여 원활한 작동을 보장하는 것이 좋습니다. 이 대체 접근법을 보여주는 예는 다음 예에서 확인할 수 있습니다.

import { useFeatures } from 'ibm-appconfiguration-react-client-sdk';

export default function App {
  const features = useFeatures();
  const defaultFlagValues = {
    'flight-booking': false
  }
  const entityId = 'john_doe';
  const entityAttributes = {
    city: 'Bangalore',
    country: 'India',
  };

  const getAppConfigurationFlags = (featureID, features) => {
    if (Object.keys(features).length === 0 && features.constructor === Object) {
      return defaultFlagValues[featureID];
    }

    return feature[featureID]
      ? feature[featureID].getCurrentValue(entityId, entityAttributes)
      : defaultFlagValues[featureID];
  };

  return getAppConfigurationFlags('flight-booking', features) ? <div>Flight Booking</div> : '';
}