[221114] 오늘의 배움(TIL) - React / 웹 접근성

💛 nalsae·2022년 11월 14일
1

📚 오늘의 배움(TIL)

목록 보기
80/84
post-thumbnail

🔸 React

  • React로 애니메이션을 구현하기 까다로운 이유는 무엇인가?

: React는 가상 DOM을 사용하여 렌더링하므로 애니메이션에 친화적이지 않음
: 대부분의 애니메이션 라이브러리는 실제 DOM에 접근하는 방식으로 구현되어 있기 때문
: 따라서 React에서 애니메이션을 구현하려면 실제 DOM을 컨트롤하는 Side Effect를 반드시 발생시킬 수밖에 없음

  • React로 이벤트 등록 후 반드시 해야 하는 작업은 무엇인가?

: 이벤트 해지 작업이 필요함, 만약 이벤트 등록 후 해지하지 않으면 이벤트가 정상적으로 캐치되지 않을 수 있음

  • React에서 이벤트를 해지하는 로직은 어떻게 구현할 수 있는가?

: 콜백 함수가 참조하는 this 값이 동일해야 하므로 이를 기억할 수 있는 클래스 컴포넌트의 인스턴스 멤버로 정의해야 함
: 혹은 클로저를 이용하여 해지하는 로직을 반환하여 할당한 후 적절한 때에 호출하는 방법도 있음

  • React의 이벤트 핸들링에는 어떤 특징이 있는가?

: 기존 JavaScript와는 다른, 독자적인 합성 이벤트를 사용하여 이벤트 핸들링을 함
: 이벤트 핸들러를 등록할 때는 onClick과 같이 Camel Case 표기법을 사용해야 함

  • React에서 이벤트 핸들링 시 브라우저의 기본 동작을 중지하고 싶다면 어떻게 해야 하는가?

: 기존 JavaScript와 동일하게 e.preventDefault 메서드를 사용하면 됨, 다만 JSX 문법을 적용하여 { } 안에 콜백 함수로 메서드를 사용해야 함

  • React에서 합성 이벤트가 아닌, 기존 JavaScript 이벤트를 사용할 수 있는 방법은 무엇인가?

: event.nativeEvent에 접근하여 사용할 수 있음

  • React에서 이벤트 핸들러 등록 시 캡처링 방식을 사용하고 싶다면 어떻게 해야 하는가?

: 이벤트 핸들러 이름 뒤에 명시적으로 Capture를 작성해야 함
ex) onClickCapture

  • React에서 지원되지 않는 Native Event에는 무엇이 있는가?

: focusIn, focusOut은 지원되지 않음
: 이벤트 객체의 currentTarget, relatedTarget 프로퍼티를 사용하여 유사하게 구현할 수 있음

  • props의 타입을 검사할 수 있는 방법으로 무엇이 있는가?

: React에 내장되어 있는 propTypes
: PropTypes 패키지, 혹은 이를 보완한 Airbnb의 PropTypes 패키지를 설치하여 검사할 수 있음
: 그러나 TypeScript가 사용하기 편리하기 때문에 위의 툴들은 많이 사용하지 않음


🔸 Web Accessibility

  • aria 관련 속성을 사용할 때 주의할 점은 무엇인가?

: 동적으로 요소 혹은 속성을 추가하는 경우 스크린 리더가 읽어 주지 않음, HTML에 정적으로 추가해야 스크린 리더가 정상적으로 읽어 줌

  • 로딩 콘텐츠를 구현할 때 주의할 점은 무엇인가?

: 스크린 리더와 같은 보조 기술이 로딩 시작, 로딩 종료 2가지도 필수적으로 안내해야 함

  • 로딩 콘텐츠를 구현할 때 로딩 시작, 로딩 종료 알림은 어떻게 구현할 수 있는가?

: aria-alive를 속성으로 가지는 요소를 미리 HTML에 정적으로 구현하고, 그 하위 요소로 role=alert를 속성으로 가지는 요소를 동적으로 추가 및 제거해야 함

profile
𝙸'𝚖 𝚊 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚝𝚛𝚢𝚒𝚗𝚐 𝚝𝚘 𝚜𝚝𝚞𝚍𝚢 𝚊𝚕𝚠𝚊𝚢𝚜. 🤔

0개의 댓글