ESLint 'react/button-has-type' 규칙

[mina-gwak]

현재 버튼 컴포넌트를 수정 중인데, 버튼은 일반적인 경우와 폼에서 모두 사용되는 만큼 타입을 'button'으로 고정시키는 것이 아니라 사용하는 쪽에서 지정해줄 수 있도록 수정하고자 했습니다. 그러던 중에 ESLint 규칙 때문에 이렇게 사용이 불가능해서 규칙을 끄는 게 어떨까 싶었고 이에 대해서 의견을 듣고자 투표를 올리게 되었습니다!

jsx-eslint/eslint-plugin-react#1555

해당 규칙은 버튼 컴포넌트의 타입은 정적인 문자거나 삼항 연산자로 지정되어야 한다는 것이고, 관련해서 논의가 이루어졌던 이슈를 확인해보니 버튼의 타입을 동적으로 설정하는 것에 대해 이야기를 나누고 있었습니다. 대강 정리하면 아래와 같습니다.

동적 타입 설정 허용 X

• 세가지의 버튼 타입은 각각 다른 의미를 지닌다. Submit 타입의 버튼은 폼 내부에서 쓰이고, Button 타입의 버튼은 자바스크립트 동작을 할 때에 사용된다. (Reset은 좋지 않은 UX 패턴이라 제외해야한다고 하심) 그러므로 이는 동일한 컴포넌트/요소의 두 가지 종류가 아닌 아예 별개의 컴포넌트/요소로 봐야 한다.

• 동적으로 타입을 지정하는 것을 허용하는 것은 규칙을 비활성화하거나 무시하는 주석을 사용하는 것과 다를바가 없다. 이 규칙은 버튼에 type 속성이 있는지 여부뿐만 아니라 올바른 type 속성을 가지고 있는지 확인하는 것이다.

• 따라서 하드코딩된 타입(정적인 문자열)으로 각각 버튼을 정의해 if/else 문을 사용하거나 ESLint override 주석을 사용해야한다. (+ 삼항 연산자로 버튼의 타입을 지정하는 것은 가능하도록 추가되었다.)

  export const Button = ({ className, type, ...props }) => {
    if (type === 'button') {
      return (
        <button
          className={['button', className].join(' ')}
          type="button"
          {...props}
        />
      );
    }
    if (type === 'submit') {
      return (
        <button
          className={['button', className].join(' ')}
          type="submit"
          {...props}
        />
      );
    }
  };
  Button.propTypes = {
    className: PropTypes.string,
    type: PropTypes.oneOf(['button', 'submit']),
  };
  Button.defaultProps = { className: '', type: 'button' };

동적 타입 설정 허용 O

• 올바른 type 속성을 넣어주고 있음에도 여전히 에러가 발생한다. type 속성이 비어있지 않은지 확인하고, 허용되는 type을 지정해주면 문제가 발생할 여지가 없지 않은가?
  

• 일반적으로 사람들은 버튼의 스타일을 지정하고 여러 형태의 버튼을 핸들링하기 위한 목적으로 Button을 만든다. 폼에서 사용 가능한 Submit 타입의 버튼과 onClick 핸들러가 있는 Button 타입의 버튼이 될 수 있을 때, 이 케이스는 버튼의 기본 사양을 준수한다고 볼 수 있다. 즉, 이러한 경우에는 동적으로 타입을 정의할 수 있도록 해도 버튼을 안전하게 사용할 수 있다.

저는 후자가 좋다고 생각하는데요. 버튼의 타입이 다르다고 해서 아예 별개의 요소로 봐야할 정도로 의미가 크게 다르다고는 느끼지 못했습니다. 따라서 타입이 다르다는 이유로 동일한 스타일, props를 받는 버튼을 각각 하드코딩해서 타입에 따라 해당하는 버튼을 렌더링하는 게 좋다는 주장에 동의하지 못하겠더라구요.
그리고 저희 버튼 컴포넌트에서는 reset을 제외한 'button', 'submit' 타입을 허용하는 쪽으로 수정할 계획이었는데, 이 규칙을 지키려면 삼항 연산자를 사용하거나 위처럼 버튼을 따로 분리해야해서 이런 방식이 불필요하다고 느껴졌습니다.

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  type: 'button' | 'submit';
  ...
}

const Button = ({ type, ... }) => (
  <button type={type === 'submit' ? 'submit' : 'button'}>
    {children}
  </button>
);

혹시 추가로 의견이 있으시다면 코멘트 남겨주세요!

@jindonyy @hemudi @healtheloper

[healtheloper]

ts 를 쓰기 때문에 삼항연산은 불필요한 작업이라고 생각해서 off 해도 괜찮겠다는 생각입니다.
삼항연산자 의도가 ts 를 쓰지 않을 시 값을 강제하기 위한거라고 생각했어요

[hemudi]

범용성 있는 버튼을 만들기 위해서라면 확실히 타입을 사용하는 쪽에서 용도에 맞게 동적으로 지정해주는게 좋을 것 같고

버튼의 타입이 다르다고 해서 아예 별개의 요소로 봐야할 정도로 의미가 크게 다르다고는 느끼지 못했습니다.

이 말씀에도 적극 동의해서 off 해도 괜찮을 것 같습니다! ^-^)b

[jindonyy]

이 규칙은 버튼에 type 속성이 있는지 여부뿐만 아니라 올바른 type 속성을 가지고 있는지 확인하는 것이다.

해당 목적으로 만든 규칙인건 좋은 의도이네요. 그러나 저도 파크 말처럼 ts를 쓴다면 대체 가능하다고 생각해요!