[React 스터디] 2 : 접근성

접근성이란?

사용자가 신체적 불편함이나 장애 여부와 상관없이 웹에 접근할 수 있도록 고려하는 것으로 img태그에 대한 대체 텍스트, 건너뛰기 링크, 레이블 제공 등으로 접근성을 높일 수 있다.

 

 

시맨틱 HTML

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

 

 

<Table />의 출력 결과는 다음과 같습니다.

 

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

 

 

렌더링 된 HTML이 유효하려면 <Columns />가 여러 <td> 엘리먼트만 반환해야 합니다. <Columns />의 render() 안에 부모 div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않습니다. Fragments는 이 문제를 해결해줍니다.

 

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

 

 

올바른 <Table />의 출력 결과는 아래와 같습니다.

 

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

 

 

배열의 각 항목을 매핑할 때에도 사용할 수 있습니다.

 

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 항목을 매핑할 때 Fragment는 반드시 `key` 프로퍼티가 있어야 합니다.
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

 

 

단축 문법 : 만약, Fragment 태그에 어떤 props도 필요하지 않고, 사용하고 있는 도구에서 지원한다면, 아래와 같이 짧게 줄여 쓸 수 있습니다.

<>
  <dt>{item.term}</dt>
  <dd>{item.description}</dd>
</>

 

 

포커스 컨트롤 / 마우스와 포인트 이벤트

React에서 포커스를 지정하려면, DOM 엘리먼트에 ref를 사용할 수 있습니다.

이를 사용해 JSX 컴포넌트 클래스 안에서 엘리먼트에 대한 ref를 먼저 생성합니다.

 

 

const inputRef = createRef();
const [input, setInput] = useState('');

const handleEvent = () => {
        const { value } = e.currentTarget;
        const { name: targetName } = e.target;

        setInput(value);
};
    
    
<Input
        ..
        onChange={handleEvent}
        onBlur={handleEvent}
        onFocus={handleEvent}
        ref={inputRef}
/>

 

 

 

https://www.w3schools.com/jsref/event_onblur.asp

onblur Event