z-index가 무엇인지, 스태킹 컨텍스트(쌓임 맥락)이 형성되는 방식을 설명해 주세요.
- z-index는 position이 static이 아닌 요소와 그 후속 요소들 또는 flex 아이템들의 z축의 순서를 정하는 CSS property입니다.
- stacking context는 사용자를 기준으로 가상의 z 축을 따라 HTML 요소들을 3차원으로 개념화한 것입니다.
- html 문서의 root 요소의 자식 요소에 stacking context가 형성되는 방식은 다음과 같습니다.
- 자식 요소의 z-index가
auto가 아니고 position이absolute나relative일 경우, 자식 요소의 position이fixed나sticky일 경우, 자식 요소의 z-index가auto가 아니고flex나grid컨테이너의 자식일 경우 등이 있습니다.
- 자식 요소의 z-index가
- 자식 stack context의 z-index 값은 부모 stacking 안에서만 의미를 갖습니다.
- stacking context들은 부모 stacking context 안에서 마치 하나의 단위처럼 처리됩니다.
2. JSX란 무엇인지 설명해주세요.
- JSX는 JavaScript에 XML을 추가한 확장 문법입니다.
- React 컴포넌트는 React가 브라우저에 렌더링하는 일부 마크업을 포함할 수 있는 JavaScript 함수입니다. 이 때 React 컴포넌트는 JSX를 사용하여 해당 마크업을 표현합니다.
Tip : JSX는 어떻게 컴파일될까?
- Babel이 JSX를
React.createElement()호출로 컴파일합니다.- React는
React.createElement()에서 생성한 객체를 읽어서 DOM을 구성하고 최신 상태로 유지하는데 사용합니다.
2.1 JSX의 규칙에 대해 설명해주세요.
- JSX는 하나의 root element를 반환해야 합니다.
- 컴포넌트에서 여러 개의 elements를 반환하는 경우, 하나의 부모 태그로 elements를 감싸주어야 합니다.
- JSX는 모든 태그를 명시적으로 닫아야 합니다.
- JSX에서 대부분의 HTML과 SVG 속성들은 camelCase로 작성됩니다.
3. HOC (Higher-Order Components)에 대해 설명해주세요.
- HOC는 컴포넌트를 인수로 받아서 새로운 컴포넌트를 반환하는 고차 컴포넌트를 말합니다.
- 고차 컴포넌트는 순수함수이므로 다른 고차 컴포넌트와 같이 조합하거나 자기 자신과 조합할 수 있습니다.
- 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유하고자 하는 경우에 고차 컴포넌트를 사용하면 좋습니다.
3.1 HOC를 사용한 경험이 있다면 얘기해주세요.
- 저는 주로 함수 컴포넌트를 사용하는데, 함수 컴포넌트에서는 훅을 통해 로직을 공유할 수 있으므로 HOC를 사용해보지 않았습니다.
