CSS-in-JS의 장점과 단점, Presentational & Container 디자인 패턴

CSS-in-JS의 장점과 단점:

장점:

1. Scoped Styling: 컴포넌트 단위로 스타일을 작성할 수 있어서 스타일 충돌을 막을 수 있다.
2. Dynamic Styles: JavaScript를 이용해서 동적으로 스타일을 바꿀 수 있다. props나 state에 따라 스타일을 쉽게 조절할 수 있다.
3. Maintenance: 스타일과 컴포넌트를 같은 파일에서 관리하니까 유지보수가 편리하다.
4. Autoprefixing: CSS-in-JS 라이브러리들이 자동으로 벤더 프리픽스를 추가해줘서 호환성을 걱정할 필요가 없다.
5. Dead Code Elimination: 사용하지 않는 스타일을 빌드 단계에서 제거해 줘서 최종 번들 크기가 줄어들 수 있다.

단점:

1. Performance: 런타임에 CSS를 생성하기 때문에 성능에 영향을 줄 수 있다. 특히 큰 프로젝트에서 문제가 될 수 있다.
2. Tooling: 기존 CSS 툴이나 브라우저 개발자 도구와의 호환성이 떨어질 수 있다.
3. Learning Curve: 기존의 CSS를 사용하는 것보다 새로운 패러다임을 배우는 데 시간이 걸릴 수 있다.
4. Overhead: 작은 프로젝트에서는 굳이 필요하지 않은 복잡성을 추가할 수 있다.
5. Debugging: CSS-in-JS는 생성된 클래스 이름이 직관적이지 않아서 디버깅이 어려울 수 있다.

 

 Presentational & Container 디자인 패턴:

Presentational 컴포넌트랑 Container 컴포넌트는 리액트 컴포넌트 디자인 패턴 중 하나다. 각자 역할이 다르다.

Presentational 컴포넌트:

• 역할: 주로 UI를 그리는 데 집중한다. 데이터나 상태 관리에는 관여하지 않는다.
• 특징: props를 받아서 렌더링만 한다. Redux나 MobX 같은 상태 관리 라이브러리에 의존하지 않는다.

Container 컴포넌트:

• 역할: 데이터와 비즈니스 로직을 처리한다. 상태 관리와 데이터를 불러오는 작업을 담당한다.
• 특징: Presentational 컴포넌트를 감싸고, 필요한 데이터와 콜백을 전달해 준다.