1. 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.
CSS-in-JS의 장점
- CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없음
- JavaSript 환경을 최대한 활용 할 수 있음
- JavaScript 변수와 함수를 사용하여 동적으로 스타일을 변경할 수 있음
- 현재 사용중인 스타일만 DOM에 포함한다.
- 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있음
- 스타일 시트 대신 JavaScript 번들에 스타일이 포함되기 때문에, 프로젝트의 의존성 관리가 더 쉬움
CSS-in-JS의 단점
- 러닝 커브
- 새로운 의존성
- 스타일을 JavaScript로 관리하기 때문에, 최종적인 번들의 크기가 커질 수 있음
- 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 수 있음
2. Presentational & Container 디자인 패턴에 대해 설명해 주세요.
Presentational 컴포넌트
UI를 어떻게 보여줄 것인지에 초점을 맞춘 컴포넌트
특징
- 일반적으로 상태를 갖지 않는 함수형 컴포넌트로 구현
- 데이터를 받아오거나 애플리케이션의 상태를 직접 관리하지 않고 props를 통해 데이터와 콜백 함수를 받아옴
- 순수 함수의 형태로 주어진 props에 따라 언제나 동일한 렌더링 결과를 반환
Container 컴포넌트
데이터 처리 및 비즈니스 로직을 담당하는 컴포넌트
특징
- 상태를 갖는 클래스 컴포넌트로 구현되는 경우가 많음
- 외부 API 호출, 데이터 가공, 상태 관리 라이브러리와의 연동 등의 역할을 담당
- Presentational 컴포넌트에 데이터와 콜백 함수를 props로 전달하여, 사용자 인터페이스를 구성
- 애플리케이션의 비즈니스 로직에 따라 자식 컴포넌트를 조건부로 렌더링이 가능함
패턴의 장점
- 재사용성: UI 컴포넌트를 다양한 컨텍스트에서 재사용할 수 있음
- 분리된 관심사: 데이터 처리와 UI 로직이 분리되어 각각의 변경 사항이 다른 부분에 미치는 영향을 최소화함
- 유지보수성: 애플리케이션의 구조가 명확해지며, 각 컴포넌트의 역할이 분명해져 유지보수가 용이함
- 테스트 용이성: Presentational 컴포넌트는 대부분의 경우 순수 함수로 구성되어 있어, 입력(props)에 대한 출력을 쉽게 예측하고 테스트할 수 있음
