React - JavaScript 응용하기 ( 조건문)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 기존에 소개드렸던 조건문을 보다 효율적으로 사용하기 위한 작성을 사용해보려고 합니다.

바로 시작해보겠습니다.

이를 위해 간단한 코드를 작성해보겠습니다.

 

1. 기존의 조건문 작성하기

 

먼저 국가 코드를 기존처럼 한번 작성해보도록 하겠습니다.

const checkCountryName = (Code) => {
  if (
    Code === 'KR' ||
    Code === 'Korea' ||
    Code === 'South Korea' ||
    Code == 'KOR'
  ) {
    return true;
  }
  return false;
};

const CountryCodeA = checkCountryName('KR');
const CountryCodeB = checkCountryName('Korea');
const CountryCodeC = checkCountryName('USA');

console.log(CountryCodeA);
console.log(CountryCodeB);
console.log(CountryCodeC);

 

먼저 위와 같이 국가코드 체크를 부여하고, 각각의 OR 연산자를 사용하여 조건을 지정 후 조건에 만족하면 true, 만족하지 않으면 False 를 출력하도록 처리되어 있습니다.

하지만 이를 이전에 설명드린 몇가지 메서드, 기능으로 간결하게 작성할 수 있습니다.

 

만약 위와 같이 조건을 여러개 작성해야 한다고 하면, 이는 결과적으로 Switch / Case 문을 사용하더라도 코드가 길어질 수 밖에 없을 겁니다.

하지만 이를 이전에 배열 내장함수를 활용하면 조금 더 간결하게 작성할 수 있습니다.

 

만약 이를 작성하게 되면 아래와 같이 작성할 수 있습니다.

 

const checkCountryName = (Code) => {
  if (['KR', 'Korea', 'KOR', 'Korean'].includes(Code)) {
    return true;
  }
  return false;
};

const CountryCodeA = checkCountryName('KR');
const CountryCodeB = checkCountryName('Korea');
const CountryCodeC = checkCountryName('USA');

console.log(CountryCodeA);
console.log(CountryCodeB);
console.log(CountryCodeC);

이전의 includes 내장함수를 이용하여, 조건에 사용할 항목들을 배열에 담고, 이를 includes 를 활용하여 포함되는 것이 참, 포함되지 않는 경우 거짓으로 처리하면 보다 간결하게 작성하고, 코드의 유지보수성에도 도움이 됩니다.

 

또한 위와 같은 유사조건문 중에, 아래와 같이 각 국가의 상징성 있는 음식을 가지고 조건문을 부여하면 아래와 같이도 작성해볼 수 있습니다.

 

const CountryFood = (food) => {
  if (food === 'KoreaFood') return 'Kimchi';
  if (food === 'JapanFood') return 'Sushi';
  if (food === 'ChinaFood') return 'Dimsum';
  if (food === 'AmericaFood') return 'Hamburger';
  if (food === 'ThailandFood') return 'TomYumKung';
  if (food === 'VietnamFood') return 'Pho';
  if (food === 'FranceFood') return 'Croissant';
  if (food === 'ItalyFood') return 'Pizza';
  if (food === 'EnglandFood') return 'FishAndChips';
  return 'Not Found';
};

조건문을 사용하여 한식이라면 김치, 일식이라면 스시와 같이 여러가지 유형을 나누어 작성할 수 있습니다.

하지만 이를 객체에 사전에 정의해놓고 사용을 한다면 코드의 유지보수성 측면이나 가독성에서 훨씬 더 좋은 코드로 작성할 수 있습니다.

 

이를 구현해보면 아래와 같이 구현해볼 수 있습니다. 

 

const foodList = {
  KoreaFood: 'Kimchi',
  JapanFood: 'Sushi',
  ChinaFood: 'Dimsum',
  AmericaFood: 'Hamburger',
  ThailandFood: 'TomYumKung',
  VietnamFood: 'Pho',
  FranceFood: 'Croissant',
  ItalyFood: 'Pizza',
  EnglandFood: 'FishAndChips',
};

const CovertCode = (food) => {
  return foodList[food] || 'Not Found';
};

코드의 길이보다는, 객체에 foodList 라고 하여, 각 국가별의 대표음식을 객체에 담아두고, 이를 사용하여 맞는 대표음식을 출력하거나

or연산자를 사용하여 해당하는 국가음식이 없을 경우 Not found 를 출력하도록 설정할 수 있습니다.

이렇게 하게 될 경우, 실제 CovertCode 를 수정하지 않고, foodList 에 해당하는 Key-Value 만 추가하면 다양한 값을 추가하거나 수정할 수 있도록 작성이 가능합니다.

 

이러한 다양한 연산자, 객체를 사용하면 조건문을 사용할 때 보다 유지보수성, 가독성 측면에서 더 나은 코드를 작성할 수 있습니다.

다음 포스팅에서 뵙겠습니다.

 

감사합니다.