📖 WAI-ARIA
w3c에 의해 제정된 RIA(Rich Internet Applications)의 웹 접근성에 대한 표준 기술 규격을 의미한다.
📚 HTML-Role 이란
- 웹 접근성을 위한 위젯, 구조 및 동작에 대한 의미 정보를 전달, element의 확장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할
- html 태그만으로 각자 가진 의미가 있어 해당 elements가 어떠한 역할을 하는지 간략하게 알 수 있지만 더 자세하게 무슨 역할을 하는 알려주기위해 role속성을 선언해줄 수 있다.
- 기술적 용어로 온톨로지를 부여한다고 표현한다.
✅ Role 속성 분류
- application : 웹 애플리케이션에 사용되는 영역을 지정
- main : 페이지의 메인 콘테츠를 지정
- form : 웹 폼ㅇ을 지정
- banner : 특정 문서가 아닌 전체 사이트 영역을 지정
<input type="image" src="btn-submit.png" role="button"><div role="application">
date picker 영역
</div>✅ Aria-접두어
<input type="image" src="btn-submit.png" role="button" aria-pressed="false">- 해당 요소가 선택되거나 엔터 키가 입력되었을 때 자바스크립트를 사용해 aria-pressed 상태값 변경할 수 있다.
[aira-pressed=true] {
background-color : #000;
}- 속성 선택자를 사용해 ARIA 상태 및 속성, role 정보에 기반해 스타일을 적용하는 방법을 허용하고 있다.
📚 React - Fragments??
- 리액트에서 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX를 사용할 때, return 문 안에는 반드시 하나의 최상위 태그가 필요한데, 이는 리액트가 하나의 컴포넌트만을 리턴하기 때문이다.
✅ Fragment 사용 예시~~!
- table 컴포넌트의 렌더링을 위해서 table이라는 클래스명을 가진 div로 묶어서 return을 한다.
이렇게 의미없는 div가 추가된다.
<table>
<tr>
<div className="Table">
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>- fragment 사용하면 이런 불필요한 사용 을 줄일 수 있다.
function Table(){
return (
<react.Fragment>
<td>Hello</td>
<td>World</td>
</react.Fragment>
)
}3.map을 사용해서 컴포넌트를 여러 개 만들 때,key attribute 를 fragment에 넣어줄 수 있다.
function Glossary(props){
return(
<dl>
{props.items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dt>{item.description}</dt>
</React.Fragment>
))}
</dl>
);
}
Hi