CSS-in-JS의 장단점과 resentational & Container 디자인 패턴
2024. 6. 3. 11:58ㆍ카테고리 없음
CSS-in-JS
자바스크립트 코드에서 CSS를 작성하는 방식
장점
- CSS 파일의 유지보수가 필요없음 (컴포넌트 레벨로 추상화하기 때문에 단일 파일에서 관리가 가능)
- 자바스크립트와 CSS사이에 있는 상수와 함수 공유 가능
- 스타일링을 위한 코드 사용량이 줄어듦
단점
- 러닝커브가 높다 (신기술을 학습하는데 소요되는 시간)
- 새로운 의존성 발생
- 별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS-in-CSS에 비해 느린 속도
정리
- 작업자의 성향이나 판단이 필요한 부분이나 개발 효율성에 중점을 둔 컴포넌트 위주의 프로젝트라면
CSS-in-JS를 고려하는 것이 좋음 ⇒ CSS 스타일 요소로만 로딩하기 때문 - 사용자 편의에 방점을 둔 인터렉티브한 웹 프로젝트
⇒ 렌더링 시 모든 CSS 스타일 요소를 로딩하는 CSS-in-CSS 방식 권장 - 참고자료
- https://css-tricks.com/a-thorough-analysis-of-css-in-js/
Presentational & Container 디자인 패턴
- 로직을 위한 컴포넌트(데이터를 위한) UI를 위한 View 컴포넌트로 분리된 패턴
Presentational
- 데이터가 어떻게 사용자에게 보여질지에 대해 다루는 것 (UI)
- state를 직접 조작하지 않으며, container component에서 받은 props를 통해 로직 구현
- 상태를 거의 가지지 않으며, 상태를 가진다면 데이터에 관한 것이 아닌 ui 상태에 관한 것
Container
- 어떤 데이터가 보여질지에 대해 다루는 것 (어떤 로직을 수행하는지)
- 주 기능으로는 Presentational 컴포넌트에 데이터를 전달하는 것 (데이터와 데이터조작에 관한 함수를 통해 제공)
Presentational & Container 디자인 패턴
장점
- 자연스럽게 관심사의 분리를 구현 (Presentational ⇒ UI 담당 순수함수) (Contatiner ⇒ 컴포넌트 상태와 기타 데이터)
- Presentational 컴포넌트는 데이터 변경 없이 화면 출력 가능하므로 앱의 여러 곳에서 다양한 목적으로 재사용 가능
- Presentational 컴포넌트는 앱의 비즈니스 로직을 수정하지 않으므로 이해가 깊지 않은 개발자라도 쉽게 수정 가능
- Presentational 컴포넌트는 테스트 하기 쉬움 (순수함수로 구현되므로)
단점?
- 비지니스 로직과 렌더링 로직을 쉽게 분리가능하나 훅을 활용하면 클래스형 컴포넌트를 사용하지 않고도, 또는 해당 패턴을 따르지 않아도 같은 효과를 볼 수 있다.
- 참고(CSS-in-JS에 관해 알아야 할 모든 것) : https://d0gf00t.tistory.com/22