본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.
CSS-in-JS?
CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.
기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기발 개발 방법의 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있다.
inline-style 과의 차이점?
CSS-in-JS는 컴포넌트 안에 css를 정의하는 inline-style과도 비슷한 느낌이다. 하지만 inline-style에는 다음과 같은 단점이 있으므로 inline-style의 사용은 지양하는 것이 좋다.
inline-style의 단점
- CSS 속성의 중복, 재사용성이 떨어진다
- inline-style로는 의사 클래스, 의사 요소, 미디어 쿼리, 키 프레임 애니메이션 같은 CSS의 기능을 활용할 수 없다
- 앱의 규모가 커질수록 유지 보수가 어렵다
- 인라인 스타일이 많으면 코드 가독성이 떨어진다
- inline style은 인라인 태그로 style을 정의하는 반면 CSS-in-JS는 style태그를 따로 정의하고 해당 태그에 class화 시켜서 연결 하는 방식으로 동작한다.
또 JSX 문법을 사용하는 React의 경우에서는 모든 속성이 props 객체의 일부가 된다. 그러니 style 부분의 비교는 항상 false가 나오게 되고 다시 렌더링 될 때마다 스타일 객체가 다시 계산되어서 성능이 저하될 수 있다.
CSS-in-JS의 장점
- CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다 (모듈성)
2 .CSS-in-JS는 JavaSript 환경을 최대한 활용 할 수 있다 - JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다
- 현재 사용중인 스타일만 DOM에 포함한다.
- CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다
CSS-in-JS의 단점
-
학습 곡선
CSS-in-JS를 처음 사용하는 개발자에게는 학습 곡선이 존재할 수 있습니다. 특히, 기존의 CSS 작성 방식과 다르기 때문에 익숙해지는 데 시간이 걸릴 수 있습니다. -
런타임 오버헤드
일부 CSS-in-JS 라이브러리는 런타임에서 스타일을 생성하고 삽입하는 방식을 사용할 수 있습니다. 이로 인해 초기 렌더링 속도에 약간의 오버헤드가 발생할 수 있습니다. -
브라우저 호환성
몇몇 CSS-in-JS 솔루션은 특정 브라우저와의 호환성 문제를 가질 수 있습니다. 이는 특히 일부 구식 브라우저에서 문제가 발생할 수 있음을 의미합니다.
Presentational & Container 디자인 패턴에 대해 설명해 주세요.
Presentational & Container 패턴은 React 애플리케이션에서 컴포넌트를 설계하고 구성하는 데 사용되는 디자인 패턴입니다.
Presentational Components (UI Components):
이 컴포넌트들은 주로 UI를 표시하고 스타일링하는 역할을 합니다. 데이터나 상태를 직접 관리하지 않으며, 부모로부터 전달된 props를 받아 렌더링합니다. Presentational 컴포넌트는 주로 재사용성이 높고, 스타일과 레이아웃에 중점을 둡니다.
// 예시: Presentational 컴포넌트
const Button = ({ onClick, label }) => (
<button onClick={onClick}>{label}</button>
);Container Components:
이 컴포넌트들은 주로 상태와 로직을 관리합니다. 데이터를 가져오고 상태를 업데이트하며, 이 정보를 Presentational 컴포넌트에 전달합니다. Container 컴포넌트는 주로 어플리케이션의 상태를 관리하고, Presentational 컴포넌트들을 조율하여 완성된 화면을 구성합니다.
// 예시: Container 컴포넌트
class ButtonContainer extends React.Component {
state = {
count: 0,
};
handleClick = () => {
this.setState(prevState => ({ count: prevState.count + 1 }));
};
render() {
return <Button onClick={this.handleClick} label={`Clicked: ${this.state.count} times`} />;
}
}이러한 패턴을 사용하면 코드를 더 쉽게 유지보수하고 테스트할 수 있습니다. Presentational 컴포넌트는 UI에 집중하고, Container 컴포넌트는 데이터와 로직에 집중하여 역할을 분리함으로써 개발자는 각각의 역할에 집중할 수 있습니다.
