- Grid, Button 등 Unit 레벨의 컴포넌트는 최대한 인라인 스타일을 지양하자. 수정될 일이 많다.
- Styled 컴포넌트를 왜 사용할까? 컴포넌트는 한번 정의되는 순간 수정이 힘들다. 예를들어 디자인, 기능, 마크업이 정의되었다면 재활용할 때 조금씩 바뀌는 코드들이 애를 먹인다. 그래서 디자인, 마크업 / 기능을 별도로 분리하여 적용한다. 재활용이 가능하기 때문이다. 그런데 디자인과 마크업 기능을 있는 족족 분리해버리면 그것 또한 괭장히 공수가 들어간다. unit 레벨부터 재활용에 대해 신경쓰고 설계해야 하기 때문이다. styled 컴포넌트의 가장 큰 장점은 바로 이 문제를 해결하기 때문이다. 간단하게 css를 적용한 컴포넌트를 만들 수 있는데 한번 만들어진 컴포넌트를 확장하여 재구성이 가능하고, 심지어 props를 통해 tag도 유동적으로 바꿀 수 있다. 얼마나 좋은가? 내 최애 css 라이브러리는 styled 컴포넌트로 확정!
- 추가적으로, javascript로 css를 설계할 수 있는 것은 정말 큰 장점이다. 그렇지 않으면 어느 순간 인라인 스타일로 적용해야 하고 더 나아가 important를 사용해야 할 때도 있다.
- blur 이벤트가 발생할 때, 특정 요소가 클릭된 경우 예외 처리를 어떻게 해야 할까? e.relatedTarget에 대해서 논의해보자.
Front 💔 End