🔸 Styled Components
- 비표준 속성을 삽입하는 경우 웹 접근성을 어떻게 준수할 수 있는가?
:
$를 비표준 속성 이름 앞에 작성하여 비표준 속성임을 명시할 수 있음
🔸 React
- 커스텀 Hooks란 무엇인가?
: 작은 Hooks들을 생성하고, 그 Hooks들을 조합하여 사용할 수 있는 Hooks를 커스터마이징한 것
useContext란 무엇이고, 왜 사용하는가?: 기존 클래스 컴포넌트만 가능하던 Context API 방식을 함수 컴포넌트에서 사용할 목적으로 사용하는 Hooks
: 인증, 테마 등의 데이터를 애플리케이션 전역에 공급하는 기존의 고차 컴포넌트 방식을 대체할 수 있음
useIntertionEffect란 무엇이고, 왜 사용하는가?: React 18 버전에 추가되었음
:useLayoutEffect보다도 빠른 시점에 실행되기 때문에 보통 CSS in JS 라이브러리를 개발하는 개발자들이 사용함
useRef는 무엇이고, 왜 사용하는가?: 기본적으로는 DOM 요소에 접근 및 조작하기 위해서 사용
: 추가적으로 생성한 변수의 값을 변경할 때 렌더링에 영향을 미치지 않도록 할 때 사용
: 즉, 컴포넌트 렌더링에 영향을 주지 않는 값을 변경할 때 사용
useCallback은 무엇이고, 왜 사용하는가?: props로 함수를 전달하는 경우 내용이 동일하더라도, 함수 컴포넌트의 몸체 내부에 선언한 함수는 렌더링 될 때마다 새롭게 정의되기 때문에 리렌더링이 발생함
: 작은 규모의 애플리케이션에서는 큰 영향을 미치지 않지만, 규모가 커질수록 렌더링 이슈가 발생할 가능성이 있음
: 이와 같은 문제를 해결하기 위해서useCallback으로 함수 자체를 기억할 수 있음
useCallback의 두 번째 인수로 전달하는 종속성 배열에는 어떤 값을 담아야 하는가?: 종속성 배열에 담겨져 있는 값이 변경될 때 기억하고있는 함수를 변경할 수 있음
useMemo란 무엇이고, 왜 사용하는가?: 함수가 실행되었을 때 반환하는 값을 기억할 수 있는 Hooks
: 비용이 많이 드는 로직의 경우 상태가 변경되지 않았을 때도 렌더링이 발생하면 성능 이슈가 생길 수 있으므로useMemo로 보완할 수 있음
useCallback과useMemo의 차이점은 무엇인가?:
useCallback은 함수 자체만 기억하지만,useMemo는 함수뿐만 아니라 반환 값까지도 기억
: 함수만 기억하고 싶을 때 보통useCallback사용
useMemo는 어떤 경우에 유용하게 사용할 수 있는가?: 인증 등 한 번 정의한 값을 기억해 두었다가 초기화하지 않고 사용하고 싶은 경우에 유용
: 상위 컴포넌트가 리렌더링 되어도 하위 컴포넌트를 기억해서 리렌더링 시키지 않을 때 사용 가능
useMemo의 한계는 무엇이고, 어떻게 보완할 수 있는가?: 기억해야 할 컴포넌트 수가 많아질수록 일일이 컴포넌트를 기억해야 하는 단점이 있음
: 이를 극복하기 위해React.PureComponent나shouldComponentUpdate와 같은 라이프 사이클 메서드를 사용할 수 있음
: 또는 컴포넌트 외부에React.memo라는 고차 컴포넌트 방식을 사용할 수 있음
React.memo는 어떻게 사용할 수 있는가?: 함수(컴포넌트)가 인수로 전달되면, 이를 기억할 수 있음
: 두 번째 인수로는 props를 비교하는 함수를 전달하여 props의 변경 여부를 판단할 수 있음
: 다만 고차 컴포넌트를 사용하면defaultProps를 사용할 수 없다는 단점이 있음
