[ 리액트(React) ] props로 전달한 파라미터가 정상적으로 함수에 적용되지 않을 때

⚡️ 구현 팁

props로 전달받은 값들을 새로운 함수를 거쳐서 나올 때 의도한 대로 동작하지 않으면 다음을 확인해보자.

1. 함수 안에 props를 바로 적용하진 않았나? - (X)
2. 컴포넌트 안에 함수를 선언하고 props로 받은 값들을 파라미터로 넣었는가? - (O)

💡 배운 점: 테스트코드의 중요성

이와 같은 문제가 생기지 않기 위해 기능별로 잘라 단계적으로 실행해보면 실패를 줄일 수 있다.

1. 해당 함수만 따로 console.log에 옮겨서 내부 기능을 먼저 테스트해본다.
2. 함수 내부적으로 문제가 없다면 props에서 받은 변수를 함수에 넣어본다.
3. 어디에서 잘못됐는지 확인한다.

// 공통 실행코드
const Loading = ({ shortPower, longPower }) => {
  const eFunction = getCode(shortPower, longPower);
}

// 1. (X)
const getCode = ({ shortScore, longScore }) => {
    let cCode;
    if (shortScore <= 30 && longScore <= 50) {
      cCode = "engineer";
    } else if (shortScore <= 60 && longScore <= 50) {
      cCode = "information";
    } else if (60 < shortScore && longScore < 50) {
      cCode = "infantry";
    } else if (shortScore < 30 && 50 < longScore) {
      cCode = "communication";
    } else if (shortScore < 60 && 50 < longScore) {
      cCode = "armor";
    } else {
        cCode= 'artillery'
    }
    return cCode;
  };
};

// 2. (O)
const getCode = (short, long) => {
  let cCode;
  if (short <= 30 && long <= 50) {
    cCode = "engineer";
  } else if (short <= 60 && long <= 50) {
    cCode = "information";
  } else if (short > 60 && long <= 50) {
    cCode = "infantry";
  } else if (short <= 30 && 50 <= long) {
    cCode = "communication";
  } else if (short <= 60 && 50 <= long) {
    cCode = "armor";
  } else {
    cCode = "artillery";
  }
  return cCode;
};