🔸 React
createRef메서드로 생성한ref객체의 특징은 무엇인가?:
ref객체는current라는 프로퍼티를 가지며, 변경해도 렌더링이 발생하지 않음
: 클래스 컴포넌트에서ref객체는 실제 DOM 요소에 접근해야 할 때 주로 사용
: 함수 컴포넌트에서ref객체는 값을 변경해도 렌더링을 발생시키지 않는 데이터를 저장할 때 주로 사용
forwardRef메서드는 무엇이고, 왜 사용하는가?:
createRef메서드로 생성한 참조 객체(컴포넌트)를 전달하는 역할을 함
: 하위 컴포넌트에서 상위 컴포넌트의 참조 값을 접근할 수 있지만 상위 컴포넌트에서 하위 컴포넌트의 참조 값을 접근할 수는 없음, 이런 경우에forwardRef를 사용하여 해결할 수 있음
forwardRef메서드 사용 시 주의할 점은 무엇인가?:
defaultProps를 함께 사용할 수 없기 때문에 매개변수로 전달하는 props에 따로 기본 값을 설정해 주어야 함
forwardRef메서드를 사용하지 않고ref객체를 전달하는 방법은 무엇인가?: 첫 번째 매개변수로 전달하는 props 뒤에
,로 구분하여ref객체를 전달할 수 있음
forwardRef메서드는 언제 유용하게 사용할 수 있는가?:
forwardRef메서드를 사용하지 않고ref객체만 전달하는 것이 일반적이지만, 라이브러리 등을 개발하는 경우ref객체를 명시하고 싶을 때forwardRef메서드를 사용하는 것이 바람직함
:forwardRef메서드를 사용하면 React Developer Tools로 확인할 수 있는 컴포넌트 트리 구조에ForwardRef가 명시되어 확인하기 용이함
- React의 higher-order component는 무엇인가?
: 고차 함수와 유사하게 컴포넌트를 매개변수로 받아 컴포넌트를 반환하는 고차 컴포넌트를 의미함
:forwardRef가 바로 higher-order component를 구현하는 방법
- React의 higher-order component 방식은 왜 사용하는가?
: 클래스 컴포넌트 내부의 상태 관리나 라이프 사이클 관련 로직을 재사용하기가 어렵기 때문에 Hooks 등장 이전에는 higher-order component 방식으로 해결했음
: Hooks 등장 이후에는 함수 컴포넌트와 Hooks를 사용하여 해결
- CRA 사용 시 클라이언트 환경에서 CORS 오류를 어떻게 해결할 수 있는가?
:
package.json파일에proxy프로퍼티의 값으로 URI를 설정하여 해결 가능
ex)"proxy": "http://localhost:5000"
- React의 Portal은 무엇이고 왜 사용하는가?
: root 컴포넌트가 아닌 특정 위치에서 React Element를 렌더링하기 위해 사용
: Portal을 사용하는 대표적인 예시로 Modal 컴포넌트를 들 수 있음
🔸 Web Accessibility
aria-hidden어트리뷰트의 역할은 무엇인가?: 값을
true로 설정하면 시각적으로는 변화가 없지만 스크린 리더와 같은 보조 기술이 인식하지 못하게 됨
aria-modal어트리뷰트의 역할은 무엇인가?: 값을
true로 설정하면 해당 요소가 Modal 기능을 수행한다는 것을 스크린 리더와 같은 보조 기술이 인식할 수 있고, 하위 요소가 Modal 요소의 일부가 아님을 알릴 수 있음
aria-label,aria-labelledby,aria-describedby어트리뷰트의 차이점은 무엇인가?:
aria-label은 이미지로 HTML 요소를 포함하는 경우 대체 텍스트를 명시해야 할 때 사용
:aria-labelledby는 다른 요소를 참조하여 접근이 가능한 이름을 명시할 수 있음
:aria-describedby는table요소에 설명을 표기할 때 사용할 수 있음
