[기술면접] React 부분 9

<목차>

23. css in js vs module.css
24. hook을 조건문 안에서 사용하면 안되는 이유

23. css in js vs module.css

CSS-in-JS

• 자바스크립트 파일 내에서 CSS를 직접 작성하여 적용하는 기술
• 컴포넌트 기반 개발에서 스타일을 컴포넌트와 밀접하게 통합시켜 관리하는 방식
• styled-components나 emotion과 같은 라이브러리들이 해당

장점

• 캡슐화 : 스타일이 해당 컴포넌트에만 적용, 글로벌 충돌 방지
• 동적 스타일링 : props나 state에 따라 스타일을 쉽게 변경 가능
• 의존성 관리 : 스타일이 자바스크립트와 함께 번들링되므로, 사용하지 않는 스타일을 제거하는데 유리

단점

• 성능 문제 : 자바스크립트를 통해 스타일을 처리하기 때문에 런타임에 성능 저하가 일어날 수 있음
• 학습 곡선 : CSS와 다르게 스타일을 적용하는 새로운 문법을 익혀야 함

CSS 모듈

• .module.css 확장자를 사용하는 CSS 파일에 스타일을 작성
• 자바스크립트 파일에서 import하여 사용
• 클래스 이름을 로컬로 유지하여 스타일의 격리를 보장

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
}

import React from 'react';
import styles from './Button.module.css';

function Button({ children }) {
    return <button className={styles.button}>{children}</button>;
}

export default Button;

장점

• 명확한 종속성 : 자바스크립트에서 명시적으로 스타일을 import하기 때문에, 어떤 스타일이 사용되는지 명확히 알 수 있음
• 자동 클래스명 변환 : 빌드 시 클래스명이 자동으로 유니크하게 변환되어 스타일 충돌 방지

단점

• 스코프 제한 : 동적 스타일링을 지원하지 않음, 자바스크립트에서 직접 클래스 이름을 조작해야 할 때 제한적

Q. css in js vs module.css에 대해 설명할 수 있습니다.

24. hook을 조건문 안에서 사용하면 안되는 이유

• Hook의 호출 순서가 보장되어야 하기 때문
• React는 Hook을 호출할 때 내부적으로 순서에 의존하여 상태를 관리, 업데이트
• Hook의 호출 순서가 일관되게 유지되어야 함
• 만약 조건문 안에 Hook을 사용하게 되면 그 조건이 true인 경우에만 Hook이 호출되므로 false인 경우 호출 순서가 깨지게 됨

=> 각 Hook에 대한 내부 상태를 추적하는데 문제가 됨 => 예상치 못한 버그와 오작동 초래

Q. hook을 조건문 안에서 사용하면 안되는 이유에 대해 설명할 수 있습니다.