🔸 Styled Components
attrs는 무엇이고, 왜 사용하는가?: 사용하면 고정적인 어트리뷰트를 작성할 수 있고, 외부에서 전달된 props에 따라 동적으로 어트리뷰트를 추가할 수 있음
🔸 React
- Context API는 무엇이고, 왜 사용하는가?
:
createContext로 Context를 생성하면 컴포넌트의 중첩 구조가 깊어도 전역에서 공유해야 할 데이터를 전달할 수 있음
: 이를 이용해 테마나 인증 정보 등의 데이터를 컴포넌트의 중첩 구조에 제약 받지 않고 전달하여 적용할 수 있음
- Context API의 한계점은 무엇인가?
: 만약 전달해야 할 Context의 수가 많다면 그만큼 Context를 전달하는 Provider의 수가 많아짐
: Provider는 실제 컴포넌트가 아니지만, React Developer Tools의 컴포넌트 트리를 봤을 때 추상 레이어가 많아져서 복잡해질 수밖에 없음
- Context API의 한계점을 어떻게 극복할 수 있는가?
: Hooks API를 사용하면 추상 레이어로 복잡하고 지저분한 코드를 개선할 수 있음
- React에서 Form 컴포넌트가 가지는 특징은 무엇인가?
: Form 컴포넌트는 React가 컨트롤 할 수 없는 비제어 컴포넌트
: 그 이유는 바로 Side Effect 때문, 사용자와 직접적으로 상호작용하기 때문에 Side Effect가 많이 발생할 수밖에 없고, React 답게 상태 관리를 할 필요 없음
- 클래스 컴포넌트의 단점은 무엇인가?
:
componentDidMount등의 라이프 사이클 메서드를 한 클래스 안에 하나밖에 쓸 수 없으므로 관심사를 분리하기가 어려움
: 즉 하나의 라이프 사이클 메서드 안에 여러 관심사가 묶여 있게 됨
: 또한 클래스를 생성할 때 필요한 다양한 유틸리티 함수가 번들 크기를 증대시키는 결과를 야기함
: 이벤트 연결 시this바인딩 이슈가 복잡하고 헷갈림
- Hooks는 왜 등장하게 되었는가?
: 훅 등장 이전에 컨테이너 컴포넌트와 Side Effect는 클래스 컴포넌트의 소관이었음
: 그러나 클래스 컴포넌트를 사용했을 때 고차 컴포넌트로 인해 발생하는 래퍼 헬, 비대해지는 컴포넌트, 클래스 이름의 혼잡성 등 다양한 문제점이 발생하여 유지 보수가 힘들어짐
: 이러한 문제를 해결하고, 클래스 컴포넌트에서 재사용하기 어려운 로직을 재사용하기 위해 Hooks가 등장하게 됨
- React에서 Hooks와 함수 컴포넌트로 구현할 수 없는 유일한 컴포넌트는 무엇인가?
: 에러를 처리하는 컴포넌트, 즉 Error Boundary 컴포넌트는 클래스 컴포넌트로만 구현할 수 있음
- React에서 Hooks를 사용할 때 주의해야 할 점은 무엇인가?
: React 함수 컴포넌트, 다른 커스텀 Hooks 함수 안에서만 사용할 수 있음
: 중첩된 함수 안에서는 사용할 수 없음, 즉 최상위 레벨에서만 사용 가능
: Hooks를 정의할 때는 Pascal Case로, 접두사로use를 붙여야 함
useState는 무엇이고, 왜 사용하는가?: 클래스 컴포넌트의
setState를 대체하기 위한 Hooks, 즉 함수 컴포넌트에서 자체적으로 상태를 관리하기 위해 사용
- 클래스 컴포넌트의
setState와useState의 차이점은 무엇인가?:
setState가 객체를 합성하여 상태를 변경하는 방식이라면,useState는 새롭게 객체를 생성하여 객체를 대체하는 방식
: 그러므로...연산자를 사용하여 합성하는 방식으로 구현해야setState와 동일하게 동작함
useEffect는 무엇이고, 왜 사용하는가?: 함수 컴포넌트 내부는 render를 위한 부분이므로 실제 DOM에 접근할 수 없음
: 이러한 문제점을 해결하고자 클래스 컴포넌트의 라이플 사이클 메서드를 대체하기 위해 사용
useEffect로componentDidMount와componentDidUpdate를 어떻게 구현할 수 있는가?:
useEffect의 두 번째 인수로 전달할 수 있는 종속성 배열을 통해 구현할 수 있음
: 만약 종속성 배열을 빈 배열로 전달하면useEffect는 최초 mount 시 한 번만 실행됨
: 종속성 배열에 조건 처리의 기준이 되는 상태 값을 담아 전달하면 배열 안의 상태가 변경될 때마다useEffect가 실행됨
useEffect와useLayoutEffect의 차이점은 무엇인가?: 기본적인 동작 방식은 동일, 실행 시점에 약간의 차이가 있음
:useLayoutEffect가useEffect보다 좀 더 빨리 실행됨
: 리페인팅 이전에 실행되는 메서드가useLayoutEffect, 이를 통해 클래스 컴포넌트의 라이프 사이클 메서드 중getSnapshotBeforeUpdate을 대체할 수 있음
: 즉 UI가 매끄럽게 렌더링되지 않는 경우useLayoutEffect를 사용하여 개선할 수 있음
useEffect로 등록한 이벤트를 어떻게 해지할 수 있는가?: 반환 값으로 등록한 이벤트를 해지하는 함수를 반환하여 해지할 수 있음
useEffect를 사용하면 컴포넌트가 업데이트 될 때마다 등록한 이벤트를 해지하는 clean up 메서드가 실행되는데, 그 이유는 무엇인가?: 공식 문서에 따르면 unmount 시점에서 이벤트가 정상적으로 해지되지 않는 이슈가 있기 때문에, 이를 해결하기 위해서 clean up 후에 이벤트를 다시 등록할 수 있게끔 함
