접근성이 필요한 이유

웹 접근성이란 사용자 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것을 말한다. 스크린 리더 같은 기술들이 웹 페이지들을 해석할 수 있도록 접근성을 갖추는 것이 필요하다.

React는 이를 제공한다.

시멘틱 HTML
접근성의 기초가 된다. 정보의 의미가 강조되는 html 엘리먼트를 웹 사이트에서 사용하면 접근성이 갖추어진다.

접근성을 갖춘 Form
input, textarea 같은 HTML 폼 컨트롤은 구분할 수 있는 라벨이 필요하다. 스크린 리더를 사용하는 사용자를 위해 설명이 담긴 라벨을 제공해야한다.

// for -> htmlFor in React
<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>

focus Control
키보드 포커스는 키보드 입력을 받아들일 수 있는 DOM 내의 현재 엘리먼트를 나타낸다.

React 어플리케이션은 런타임 동안 HTML 돔을 지속적으로 변경하기 때문에, 가끔 키보드 포커스를 잃거나 예상치 못한 엘리먼트에 포커스를 맞추곤 한다. 이를 수정하기 위해 키보드 포커스를 올바른 방향으로 변경해주어야한다.

키보드 포커스는 매우 중요한 접근성 기능이지만, 동시에 매우 조심해서 사용해야 하는 기능이기도 합니다. 사용자가 애플리케이션을 어떻게 사용하길 원하는지 예측하지 말고 키보드 포커스 흐름이 흐트러졌을 때 이를 고치려는 방법으로 사용하기 바랍니다.

마우스와 포인터 이벤트
마우스 혹은 포인터 이벤트로 노출된 모든 기능을 키보드만으로 사용할 수 있도록 보장해야한다. Modal UI 의 경우 대게 바깥을 누르면 꺼지게 된다.

class OuterClickExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };
    this.toggleContainer = React.createRef();

    this.onClickHandler = this.onClickHandler.bind(this);
    this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this);
  }

  componentDidMount() {
    window.addEventListener('click', this.onClickOutsideHandler);
  }

  componentWillUnmount() {
    // memory 누수를 막기 위한 리스너 제거
    window.removeEventListener('click', this.onClickOutsideHandler);
  }

  onClickHandler() {
    // 클릭하면 열린다.
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }));
  }

  onClickOutsideHandler(event) {
    
    // 클릭이 된 상태에서 바깥을 누르면 꺼진다.
    if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {
      this.setState({ isOpen: false });
    }
  }
  
  render() {
    return (
      <div ref={this.toggleContainer}>
        <button onClick={this.onClickHandler}>Select an option</button>
        {this.state.isOpen && (
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        )}
      </div>
    );
  }
}

위 와 같이 짜여진 코드는 웹 접근성이 좋지 못한 코드이다. 키보드로는 기능이 수행되지 않는다.

focus - blur 이벤트를 활용하면 키보드로도 pop-out 시킬 수 있다.

// ...
// focus 이벤트가 발생하기 전에 블러 이벤트가 발생해야한다.
  onBlurHandler() {
    this.timeOutId = setTimeout(() => {
      // React element의 다른 자식에 포커스가 맞추어져 있는 것인지를 확인하기위해. 그러면 꺼야함. 자기 자식이 포커스인 경우 x
      this.setState({
        isOpen: false
      });
    });
  }

  // 자식이 포커스를 받으면, 팝오버를 닫지 않습니다.
  
  onFocusHandler() {
    clearTimeout(this.timeOutId);
  }

  render() {
    // React는 블러와 포커스 이벤트를 부모에 버블링해줍니다.
    return (
      <div onBlur={this.onBlurHandler}
           onFocus={this.onFocusHandler}>
        <button onClick={this.onClickHandler}                aria-haspopup="true"
                aria-expanded={this.state.isOpen}>

          Select an option
        </button>
        {this.state.isOpen && (
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        )}
      </div>
    );
  }

다음과 같이 잘 된다.

codeSplitting

번들링

대부분의 리액트 앱들은 웹팩, 롤업 같은 번들링 툴을 사용하여 여러 파일을 하나로 병합한 번들된 파일을 웹페이지에 포함하여 한번에 전체 앱을 로드할 수 있다.

code splitting - 동적 import()

import("./math").then(math => {
  console.log(math.add(16, 26));
});

위 와 같이 동적 import를 사용하게 되면 앱의 코드를 분할한다.

entry points

//webpack.config.js
 const path = require('path');

 module.exports = {
  entry: './src/index.js',
  mode: 'development',
   // entry 추가
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
   output: {
    filename: 'main.js',
    filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

두 개의 파일로 분할 되었다. 하지만 위 방식은 다음과 같은 단점을 갖는다.

• 중복 모듈이 있는 경우 두 번들에 모두 포함된다.

• 코드의 동적 분할에는 사용할 수 없다.

React.lazy

React.lazy와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다.

import React, { Suspense } from 'react';

// MyComponent가 처음 렌더링 될 때 OtherComponent를 포함한 번들을 자동으로 불러온다.

// lazy component (=OtherComponent) 는 Suspense 컴포넌트 하위에서 렌더링 되어야하며, 로드되길 기다리는 동안 보여줄 예비 컨텐츠를 보여줄 수 있다.
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Ref

• react