에러 코드

export const AvatarContainer = styled.div`
  width: ${props => (props.size === 40 ? "40px" : props.size === 42 ? "42px" : "64px")};
  height: ${props => (props.size === 40 ? "40px" : props.size === 42 ? "42px" : "64px")};
  flex-shrink: 0;
  margin-right: 9px;
`;

삼항 연산자를 작성하던 중 제목과 같은 에러가 발생해서 원인을 알아보았다.

원인

• no-nested-ternary 에러는 가독성을 저해할 수 있는 중첩된 삼항 연산자 사용을 권장하지 않는 ESLint 규칙에서 비롯된다.
• 해당 에러를 해결하기 위해서는 if-else 문이나 switch 문을 사용해 명시적이고 가독성이 좋은 코드로 변경해야 한다.

수정 코드

export const AvatarContainer = styled.div`
  width: ${(props) => {
    if (props.size === 40) {
      return "40px";
    }
    if (props.size === 42) {
      return "42px";
    }
    return "64px";
  }};
  height: ${(props) => {
    if (props.size === 40) {
      return "40px";
    }
    if (props.size === 42) {
      return "42px";
    }
    return "64px";
  }};
  flex-shrink: 0;
  margin-right: 9px;
`;