[TIL] 2022-11-10

task로 부여받은 부분 만들었는데 이 부분은 API에서 내려주는 status라는 문자열에 따라서 버튼에 들어가는 글자가 달라지는 부분이었다. 삼항연산자로 처리하면 좋았을텐데 안타깝게도 status가 'HIGH', 'LOW', 'NONE' 이렇게 세 개가 있어서 이러면 삼항연산자를 중첩했어야 했다. 근데 esLint 규칙으로 삼항연산자의 중첩은 금지되어 있었다. 너무 여러번 겹치면 사람이 헷갈리거나 실수 할 수 있어서 같았다.

const example = () => {
  return (
    <div>
    {status === 'HIGH' ? <button>HIGH</button> :
     status === 'LOW' ? <button>LOW</button> :
     null    
    }
    </div>
  )
}

그래서 이 다음으로는 함수로 만들어서 넣어버리는 방법을 선택했다.
이 방법은 아래의 블로그의 예시를 보고 찾았다.

JSX에서 && 대신에 3항 연산자를 더 선호하는 이유

const buttonText = () => {
  if (status === 'HIGH') {
    return (
      <button>HIGH</button>
    );
  };
  if (status === 'LOW') {
    return (
      <button>LOW</button>
    );
  };
};

const example = () => {
  return (
    <div>{buttonText()}</div>
  )
}