8주차 위클리 페이퍼 안내
아래 두 가지 주제에 대해서 각자 조사해서 답변을 제출해 주세요.
본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.
Presentational & Container 디자인 패턴에 대해 설명해 주세요.
- CSS-in-JS의 장점과 단점:
장점:
컴포넌트 단위 스타일링: CSS-in-JS는 컴포넌트 단위로 스타일을 정의하므로, 각 컴포넌트의 스타일과 로직이 결합되어 모듈성이 향상됩니다.
동적 스타일링: JavaScript를 사용하여 스타일을 동적으로 변경할 수 있어, 상태에 따라 스타일을 동적으로 제어하기 용이합니다.
스타일 충돌 회피: 각 컴포넌트의 스타일이 고유한 스코프 내에서 유지되므로, 스타일 충돌 문제를 방지할 수 있습니다.
컴파일 타임 최적화: 몇몇 CSS-in-JS 라이브러리는 컴파일 타임에 스타일을 최적화하여 불필요한 스타일을 제거하고 성능을 향상시킵니다.
단점:
러닝 커브: CSS-in-JS를 처음 사용하는 개발자들에게는 학습 곡선이 존재합니다. 기존의 CSS 작성 방식과는 다른 패러다임을 익히는 데 시간이 걸릴 수 있습니다.
성능 오버헤드: 일부 CSS-in-JS 라이브러리는 런타임에 스타일을 계산하고 적용하기 때문에 성능 오버헤드가 발생할 수 있습니다. 하지만 최신 라이브러리는 이러한 문제를 해결하기 위해 노력하고 있습니다.
서버 사이드 렌더링(SSR) 어려움: 일부 CSS-in-JS 라이브러리는 서버 사이드 렌더링을 지원하기 어려울 수 있습니다. 이로 인해 초기 로딩 성능이 저하될 수 있습니다.
- Presentational & Container 디자인 패턴:
Presentational Components:
목적: UI를 표현하기 위한 컴포넌트로, 상태나 데이터를 관리하지 않습니다.
특징:
주로 함수형 컴포넌트로 작성됩니다.
프레젠테이셔널 컴포넌트는 주로 UI 요소를 렌더링하고 스타일을 관리합니다.
부모나 컨테이너로부터 props를 받아 UI를 그립니다.
상태나 생명주기 메서드가 거의 없습니다.
Container Components:
목적: 데이터와 상태를 관리하며, Presentational 컴포넌트들을 조율하고 제어합니다.
특징:
클래스형 컴포넌트로 작성될 수 있습니다.
상태를 가지고 있고, 데이터를 불러오거나 상태를 변경하는 역할을 합니다.
Presentational 컴포넌트들을 감싸고, 필요한 데이터와 메서드를 props로 전달합니다.
주로 상태 관리 라이브러리(예: Redux, MobX)와 함께 사용됩니다.
장점:
모듈성 향상: 코드의 재사용성과 유지보수성을 향상시킵니다.
역할 분리: 각 컴포넌트가 특정 역할을 가지므로 코드가 더 명확해지고 이해하기 쉬워집니다.
테스트 용이성: Presentational 컴포넌트는 UI만 표현하므로 테스트가 더 쉽게 이루어집니다.
