🔸 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를 속성으로 가지는 요소를 동적으로 추가 및 제거해야 함
