🔸 React
- 고차 컴포넌트는 무엇이고, 왜 사용하는가?
: 컴포넌트에 고차 함수를 전달하여 래핑된 컴포넌트를 반환할 수 있는데, 여기서 반환된 컴포넌트를 고차 컴포넌트라고 함
: 원래 외부 컴포넌트의 상태와 라이프 사이클 메서드는 내부 컴포넌트가 공유 받을 수 없는데, 이를 해결하기 위해 사용
- 고차 컴포넌트는 어떻게 사용할 수 있는가?
:
with로 시작하는 함수의 인수로 컴포넌트를 전달하여 사용할 수 있음
ex)withHOC(Component)
- 고차 컴포넌트의 한계점은 무엇이고, 이를 어떻게 극복할 수 있는가?
: 내부 컴포넌트가 공유 받아야 할 데이터가 많다면, 콜백 헬이 발생할 뿐만 아니라 컴포넌트 트리를 확인했을 때 고차 컴포넌트를 감싸는 추상 레이어가 무수히 많아질 수 있음
ex)hocD(hocC(hocB(hocA))))
- React에서 상태를 끌어올려야 하는 경우는 무엇인가?
: 하위 컴포넌트의 상태를 상위 컴포넌트의 또 다른 하위 컴포넌트에서 사용하고 싶은 경우 상태를 끌어 올려서 props로 전달해야 함
- Hooks 등장 이전에 React에서는 하위 컴포넌트의 상태를 상위 컴포넌트로 어떻게 끌어올릴 수 있었는가?
:
render함수 자체를 props로 전달해서 그 함수가 JSX를 반환하는 구조로 작성할 수도 있고, 함수 자체를children으로 전달하여 JSX를 반환하게끔 할 수도 있음
: 하지만 Hooks를 사용하면renderprops 없이도 상태를 끌어올릴 수 있음
- Props Drilling이란 무엇인가?
: 애플리케이션의 규모가 커지면 상태를 전달하거나 끌어 올릴 때 몇 단계씩 중첩 구조가 생길 수밖에 없는데, 이를 Props Drilling이라고 함
- Props Drilling의 문제점은 무엇이고, 이를 어떻게 해결할 수 있는가?
: 중첩 구조가 깊어질수록 상태를 가질 필요가 없는데 전달 목적으로 상태를 가지게 되는 컴포넌트가 많아질 뿐만 아니라, 복잡성이 증가함
: 이와 같은 문제를 해결하기 위해 Context API, 혹은 Redux와 같은 상태 관리 라이브러리를 사용할 수 있음
🔸 Tailwind CSS
@apply는 무엇이고, 왜 사용하는가?: 기본적으로 긴 클래스명을 변수화하기 위해 사용
: 재사용성 관점에서도 유용하게 사용할 수 있음
: 하나의 클래스 안에 유틸리티 퍼스트 방식과 개별 스타일링까지 함께 적용할 수 있다는 장점이 있음
@layer는 무엇이고, 왜 사용하는가?: Base Style을 추가할 때 사용할 수 있음
: 선언한@layer안에 스타일을 선언하면 그룹화하여 스타일링할 수 있음
- Tailwind CSS와 CSS in JS 방식의 차이점은 무엇인가?
: Tailwind CSS를 사용하면 빌드할 때 CSS 파일이 생성되고, 이미 적용한 다른 CSS와 정상적으로 병합됨
🔸 Twin
- Twin은 무엇이고, 왜 사용하는가?
: 유틸리티 퍼스트 방식의 Tailwind CSS와 CSS in JS 방식의 라이브러리를 함께 사용하고 싶을 때 Twin을 사용할 수 있음
: 유틸리티 퍼스트 방식과 Styled Components 방식을 내부적으로 모두 제공함
🔸 Story Book
- Story Book은 무엇이고 왜 사용하는가?
: TDD 방식의 Jest, React Testing Library와는 다르게 CDD 방식으로 컴포넌트 테스트를 진행할 수 있는 툴
: 컴포넌트별 독립적인 테스트가 가능하고, 문서화까지 한 번에 구현할 수 있음
: 또한 기존 TDD 툴과의 호환이 가능하다는 장점이 있음
- Story Book을 CBD 기반 라이브러리, 프레임워크에 적용했을 때의 장점은 무엇인가?
: 개발이 고도화될수록 컴포넌트 수가 기하급수적으로 늘어나는데, 기존에는 테스트를 하기 위해 전체 애플리케이션을 구동해야 했음
: 하지만 Story Book을 사용하면 독립적인 컴포넌트 단위로 테스트가 가능하기 때문에 테스트가 훨씬 쉬움
: Atomic Design 방식으로 구현하는 디자인 시스템과도 궁합히 잘 맞음
- Story Book의 AddOn은 무엇인가?
: 익스텐션과 유사한 개념, Story Book의 기능을 확장할 수 있음
