[TIL] #27. 커스텀 컴포넌트

2022.6.30. (목)

1. 오늘의 소감

• BEM 같은 CSS 방법론과 SASS 같은 CSS 전처리기에 대해서는 들어봤지만, CSS-in-JS 에 대해서는 처음 접했다. CSS-in-JS 의 발상은 정말 획기적이다. 기존에 내가 가지고 있던 리액트의 불편함과 의문점을 시원하게 해결해준 아이디어였달까. 역시 내가 불편하다고 생각한 것은 이미 누가 해결해놓은 경우가 많구먼…
• 기존 리액트는 JSX 문법을 사용하면서 HTML 와 JS 를 하나의 파일에서 처리할 수 있었다. 하지만 CSS는? CSS는 결국 따로 파일을 만들 수 밖에 없다. 스타일을 적용하려면 JSX 문서와 CSS 문서를 왔다갔다하며 클래스명을 확인해야했다. 따라서 직관적으로 ‘이 컴포넌트는 이런 스타일이 들어갔구나!’ 하고 파악하기가 힘들다. 리액트의 특장점인 ‘선언형 프로그래밍'에서 CSS는 소외되어있는 것이다. 이런 문제점을 해결한 것이 CSS-in-JS 이다. 즉, JS(JSX) 파일에서 CSS 도 같이 코딩해버리자는 개념이다. 이 아이디어로 인해서 더이상 CSS 문서를 보러 왔다갔다 할 필요가 없어졌다. 이제 JSX 파일에서 HTML + CSS + JS 를 한번에 처리할 수 있다! 컴포넌트 안에 HTML, CSS, JS 코드를 다 세팅해서 내보낼 수 있다!
• 사실 CSS-in-JS 개념이 혁신적으로 느껴져서 빨리 적용해보고는 싶은데, 아직 리액트가 충분히 숙지되지 않은 상태에서 쓰려니 어렵다😅. 그래도 이제 JSX 에서 className 확인하고 .css 파일로 가서 일일이 확인하는 일을 줄일 수 있다니 최고다!