🔸 React
- prop-types 패키지의
elementType은 무엇을 검사할 수 있는가?:
React.createElement로 생성한 React Element를 검사할 수 있음
: 이 때 인수로는 문자열(string),React.elementType,React.Fragment를 전달할 수 있음
- React에서 자체적으로 수행할 수 있는 PropTypes 검사의 문제점은 무엇인가?
: props만 검사할 수 있음, 나머지는 별도로 검사할 수 있는 수단이 내장되어 있지 않기 때문에 직접 조건문을 사용하여 유효성 검사를 해야 함
: 공식 문서에서도 큰 코드 베이스에서의 타입 검사는propTypes로 부족하다는 언급이 되어 있음
- prop-types 패키지의
oneOf와oneOfType메서드의 차이는 무엇인가?: 둘 다 배열을 인수로 전달해야 하는 것은 동일하지만,
oneOf는 구체적인 값을 전달해야 하고oneOfType은 검사할 수 있는 타입을 전달해야 함
ex)oneOf(["div", "h1"])/oneOfType([string, elementType])
- React의 element와
elementType은 어떤 차이가 있는가?: JSX 문법으로 반환한 요소 자체는 element,
elementType은 React로 정의한 컴포넌트(Element)의 이름
- prop-types 패키지의
node타입은 무엇인가?: React 컴포넌트의
children에 해당하는 것, 즉 렌더링이 가능한 숫자, 문자열, 엘리먼트, 배열(리스트)이 해당함
- 컴포넌트에 전달하는
restProps는 어떻게 타입 검사를 진행해야 하는가?: 어떤 타입이 들어올지 유추할 수 없기 때문에 prop-types 패키지에서는
any타입으로 검사해야 함
: TypeScript를 사용하는 경우unknown타입을 사용하면 됨
- prop-types 패키지에서 HTML Element 타입은 어떻게 검사해야 하는가?
: prop-types 패키지에서는 따로 HTML Element 타입을 제공하지 않기 때문에
instanceOf로 확인해야 함
: 이러한 한계점 때문에 TypeScript를 사용하는 것이 바람직함
- React에서 스타일링할 수 있는 방법에는 무엇이 있는가?
: CSS를 사용하는 방법
: Sass를 사용하는 방법
: CSS/Sass Modules 방식을 사용하는 방법
: Utility First 방식을 사용하는 방법
: CSS in JS 방식을 사용하는 방법
- React에서 CSS를 사용하여 스타일링하는 경우 한계점은 무엇인가?
: 스코프를 구분할 수 없기 때문에 식별자가 충돌할 우려가 있음
: 어떤 컴포넌트가 어떤 CSS 파일에 의존하고 있는지, 즉 종속성을 관리하기가 어려움
: 사용되지 않는 코드의 제거가 어려움
- React에서 Utility First, CSS in JS 방식을 사용하여 스타일링하는 경우의 이점은 무엇인가?
: 컴포넌트 중심으로 설계할 수 있기 때문에 React의 취지에 부합함
: CSS만 사용하는 경우 해결할 수 없는 스코프 문제를 해결하여 식별자가 충돌할 우려가 없음
- React에서 CSS in JS 방식을 사용하여 스타일링하는 경우의 단점은 무엇인가?
: JavaScript에 포함된 CSS 코드가 실시간으로 해석되는 구조이므로 렌더링이 지연되기 때문에 성능 이슈가 발생할 수 있음
🔸 Styled Components
- Styled Components는 무엇이고, 왜 사용하는가?
: 대표적인 CSS in JS 방식의 스타일링 툴로, JavaScript 코드 안에서 CSS를 사용할 수 있어서 컴포넌트 단위 개발에 적합함
- Styled Components를 Babel 플러그인과 함께 사용했을 때의 이점은 무엇인가?
: 클래스 이름이 명시적으로 변경되어 디버깅이 용이함
ex) Babel 플러그인 사용 전
ex) Babel 플러그인 사용 후
: SSR 호환 문제를 해결할 수 있음
: 번들링으로 파일 크기를 최적화할 수 있음
- Styled Component를 생성하려면 어떻게 해야 하는가?
: 태그드 템플릿 문법을 사용하여 Styled Components를 생성할 수 있음
// 체이닝 방법 const Component = styled.span` ...CSS Code... ` // 함수 호출 방법 const Component = styled("span")` ...CSS Code... `
- Styled Component를 생성할 때 주의할 점은 무엇인가?
: 기본적으로 HTML에 존재하지 않는 태그 이름은 사용할 수 없음
- Styled Components로 생성한 컴포넌트의 단점은 무엇인가?
: 비표준 HTML 속성을 사용한 경우 Styled Components가 필터링해주지 않고 그대로 렌더링됨
: 이는 웹 표준, 웹 접근성 측면에서 적절하지 않음
- Styled Components에서 props에 따라 조건부 렌더링을 어떻게 구현할 수 있는가?
: 태그드 템플릿 안에 템플릿 리터럴(
${ })을 사용하여 props를 전달할 수 있고, 그 안에서 조건문을 사용하여 조건부 렌더링이 가능함
- Styled Components에서 비표준 속성이 렌더링되는 단점을 어떻게 해결할 수 있는가?
: 5.1 버전부터 추가된 transient props(임시적인 props) 방식을 사용하면 해결할 수 있음
: 전달할 props 앞에$를 작성하면 비표준 속성임을 인식해서 실제 DOM에 렌더링되지 않지만, props에 따른 스타일링은 정상적으로 적용됨
- Styled Components를 사용했을 때의 장점은 무엇인가?
: 스타일링을 구분하지 않고 한 파일 안에 간단하게 컴포넌트를 생성할 수 있음
: 그러나 한 파일 안에 컴포넌트가 너무 비대해지는 경우 분리하는 것이 바람직함
- Styled Components는 어떻게 확장할 수 있는가?
: 함수 호출문 방식을 이용하면 기존에 생성했던 Styled Component뿐만 아니라 React로 생성한 컴포넌트도 확장이 가능함
const Component = styled(PrevComponent)` ...CSS Code... `
- React로 생성한 컴포넌트를 Styled Component로 확장하는 경우 주의할 점은 무엇인가?
:
classNameprops를 반드시 설정해 주어야 정상적으로 스타일링이 적용됨
- Styled Components에서 Sass 문법을 사용할 수 있는가?
: 사용할 수 있음, 내부적으로 stylis.js를 사용하기 때문에 Sass 문법을 그대로 답습하고 있으므로 중첩 규칙, 가상 클래스, 가상 요소, 유사 클래스 등 모두 사용 가능
- Styled Components에서 CSS 믹스인이 가능한가?
: 불가능하지만
css메서드를import하여 템플릿 리터럴(${ })을 삽입하는 방식으로 중복되는 부분을 관리할 수 있음const boxMixin = css` margin: 20px 10px; border: 0; padding: 1em; font-size: 15px; font-weight: bold; line-height: 1.7; color: #fff; `; const Box = styled.div` ${ boxMixin }; background: #07f; `;
- Styled Components로 애니메이션을 어떻게 구현할 수 있는가?
: CSS in JS 방식에서 애니메이션은 성능 이슈를 유발할 수 있기 때문에 주의해서 사용해야 함
:keyframes라는 내장 메서드를import해서 애니메이션을 합성하여 사용해야 함
- Styled Components로 전역 스타일링을 어떻게 적용할 수 있는가?
:
createGlobalStyle메서드를import하여 따로 선언하고, 이를export하여 내보낸 후에 Styled Component로 사용할 수 있음
- Styled Components에서 테마 관리를 어떻게 할 수 있는가?
: 컴포넌트 스타일을 일괄 변경하려면기본적으로 전달되는
themeprops를 활용할 수 있음
: 상위 컴포넌트에서themeprops를 공급하면 하위 컴포넌트에서 이를 전달 받아 사용하여 스타일링을 적용할 수 있는 구조
:ThemeProvider라는 내장 컴포넌트를import하여theme을 전달할 수 있음
