ESLint 접근성, Component Props

1. ESLint 접근성 검사

❌ 접근성 문제를 일으키는 잘못 사용된 <a/>(anchor)

👉 앵커(anchor) 요소의 역할은 href 속성을 통해 특정 페이지 또는 현재 페이지의 특정 위치로 이동하는 것이다. 하지만 아래 방법은 모두 역할을 무시하고 JavaScript로만 제어하는 잘못된 것들이다.

✍ Exmple

<a href="javascript:void(0)" onClick={handleClick} >액션</a>
<a href="#" onClick={handleClick} >액션</a>
<a onClick={handleClick} >액션</a>

⭕ JavaScript 컨트롤 할 경우 Button 요소를 사용

✍ Exmple

<button type="button" onClick={handleClick} >액션</button>

⭕ eslint-plugin-jsx-a11y 의 접근성 오류 검사 회피

a 요소를 사용했음에도 버튼 역할을 (role="button") 수행하도록 구성 가능하다. 이런 경우 href 속성은 키보드 포커스 역할을 수행하는 목적으로 사용되므로 값이 중요하지 않다. (tabIndex 속성 대체 가능)그럼에도 접근성 검사는 이를 판별할 수 없어. 사용자가 직접 오류가 아님을 명시해줘야 된다.

👉 eslint-plugin-jsx-a11y 의 anchor-is-valid 접근성 오류 검사를 회피하려면 다음과 같이 인라인 비활성화 주석을 작성 추가해야 된다.

✍ Exmple

/* eslint-disable jsx-a11y/anchor-is-valid  */

2. Component Props Pattern

2-1. props 설계

✍ Exmple

"props": {
  "href": "홈 링크 컴포넌트가 포함하는 앵커 요소의 href 속성 값",
  "title": "홈 링크 컴포넌트가 포함하는 앵커 요소의 title 속성 값",
  "external": "홈 링크 컴포넌트 연결이 새 창(탭) 열림일 경우 포함하는 앵커 요소의 target, rel 속성 설정",
  "children": "컴포넌트 요소가 포함하는 자식 React 요소(들)
}

2-2. props 전개

👉 컴포넌트로 전달된 props 객체를 전개(spread) 하여 컴포넌트의 내부의 구조(Markup)에 모두 추가 설정할 수 있다.

✍ Exmple

<Component {...props} />

❗ 다만, props 객체의 속성을 전개하였을 때 사용된 external과 같은 비 표준 속성은 오류를 발생시킨다. 이러한 경우 컴포넌트로 전달된 props에서 비 표준 속성을 걸러내어 문제를 해결한다.

Warning: Received `true` for a non-boolean attribute `external`. If you want to write it ti the DOM, pass a string instead: external="true" or external={value.toString()}.

✍ Exmple

// 구조 분해 할당 + 나머지 연산
const { external, children, ...aNodeProps } = props;

// 전개 연산
<Component {...aNodeProps}>
  {children}
</Component>

2-3. props 검사

👉 PropTypes 를 사용해서 컴포넌트에 전달된 props를 검사한다.

✍ Exmple

import PropTypes from 'prop-types';

2-4. className 병합

👉 props 전개 코드의 순서에 따라 기존 속성을 덮어쓰거나, 전달된 속성이 덮어써지는 문제가 발생한다. 예를 들어 className 속성처럼 기존 속성 값에 전달된 속성 값이 병합되어 사용되어야 하는 경우 문제가 된다. 이러한 문제를 해결하려면 컴포넌트 내부에서 조건 처리 하거나, classnames 라이브러리를 활용할 수 있다.

✍ Exmple - classnames

import classNames from 'classnames;

const { external, children, className, ...aNodeProps } = props;
const combineClassNames = classNames('originalClassName', className);

2-5. as 속성

👉 컴포넌트 내부의 DOM 노드 중 특정 노드를 외부에서 변경할 수 있도록 처리하는데 사용되는 속성 이다. (tag라는 이름으로도 사용된다)

✍ Exmple

const { as: Component, ...domProps } = props;

<Component {...domProps} />

---

✍ Exmple - Final Props

"props": {
  "href": "홈 링크 컴포넌트가 포함하는 앵커 DOM 노드의 href 속성 값",
  "title": "홈 링크 컴포넌트가 포함하는 앵커 DOM 노드의 title 속성 값",
  "className": "앵커 DOM 노드의 class 값에 병합 할 클래스 이름",
  "external": "홈 링크 컴포넌트 연결이 새 창(탭) 열림일 경우 포함하는 앵커 DOM 노드의 target, rel 속성 설정",
  "children": "컴포넌트 요소가 포함하는 자식 React 요소(들)",
  {...aNodeProps},
  "wrapperProps": {
    "as": "래퍼 DOM 노드의 태그 이름",
    "className": "래퍼 DOM 노드의 class 값에 병합 할 클래스 이름",
    {...wrapperNodeProps}
  }
}

2-6. props 기본 값

👉 필요에 따라서 컴포넌트의 전달 속성인 props 객체의 속성 일부에 기본 값을 설정 할 수 있다.

✍ Exmple

Component.defaultProps = {
  prop1: 'efaltValue'
}