내가 생각하는 CSS-in-JS의 장단점
CSS-in-JS는 별도의 CSS 파일을 이용하지 않고 자바스크립트를 통해 스타일을 구현하는 방법(자바스크립트로 CSS를 작성)이라고 알고 있다. Styled Components가 우리가 잘 아는 대표적인 CSS-in-JS 라이브러리라고 할 수 있다.
CSS-in-JS의 장점은 스타일을 지역 스코프로 지정하기 때문에 className이 겹치는 등 다른 컴포넌트에 잘못된 스타일을 부여하지 않는다는 점과, 스타일 상속(확장)이 간편하다는 점, 그리고 자바스크립트 변수를 스타일에 사용할 수 있다는 점, 그리고 컴포넌트의 스타일에 영향을 미치는 요소나 부분을 쉽게 찾을 수 있어 유지보수가 쉽다는 점 등이 있다..
단점으로는 별도의 라이브러리를 설치해야하기 때문에 번들 크기가 커진다는 점이다. 또 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 성능이 느리다고 한다. 컴포넌트가 렌더링되며 형태가 잡히기 때문에 원형(형태가 잡히기 이전)이 잠시 노출되는 문제도 있다. (이를 FOUC, Flash of unstyled content 라고 함)
빠르게 스타일을 작성할 수 있고 간편해서 CSS-in-JS 방식이 무조건 좋다고 생각할 수도 있지만 자신의 프로젝트 환경에 따라 적절한 선택을 할 수 있어야 할 것 같다!
Presentational & Container 디자인 패턴
Presentational and Container 디자인 패턴은 로직을 위한 컴포넌트와 UI를 위한 컴포넌트로 분리된 패턴을 의미한다.
Presentational component는 UI와 관련된 컴포넌트를 의미하며, State를 직접 조작하지 않고 전달받은 Props를 통해 로직을 구현한다. 그렇기깨문에 use... 등 State와 관련된 훅을 사용하지 않으며, 만약 상태가 있을 경우 데이터가 아닌 UI와 관련된 상태만 가진다.
Container component는 로직을 수행하는데 관련된 컴포넌트를 의미하며, 데이터와 데이터 조작에 관한 함수를 만들고 Presentational component에 Props로 이를 전달한다.
예를 들어 NavigationBar 컴포넌트가 있고, 내부에 유저의 로그인 상태를 보여주는 컴포넌트가 있을 경우, NavigationBar 컴포넌트가 유저 데이터를 요청하고 그 결과 및 상태를 자식 컴포넌트에 전달하여 이를 통해 자식 컴포넌트가 UI를 업데이트한다면 NavigationBar 컴포넌트가 Container 컴포넌트이고 자식 컴포넌트가 Presentational 컴포넌트라고 할 수 있을 것이다.
