앞에서 진행했던 scoreboard 앱을 scoreboard 메뉴로 리팩토링하면서 css를 모듈로 만드는 방식과 class 바인딩 개념을 살펴본다.

만일 앞서의 scoreboard 튜토리얼을 따라하지 않았다면 classnames 모듈만 인스톨하고 이 챕터는 스킵하고 넘어가도 됩니다.

요약

+ css 를 모듈로 만들기

+ class 바인딩 (classNames 3rd party 라이브러리를 사용하여)

페이지폴더로 이동

기존에 App.js에 있던 Scoreboard 소스를 pages 폴더 아래 Scoreboard 컴포넌트로 옮긴다. App.js는 삭제한다. index.js에 링크된 App.js도 삭제한다.

pages 폴더에 scoreboard 폴더를 만들고 그쪽으로 Scoreboard 컴포넌트를 이동한다. 그리고, App.css를 scoreboard 폴더아래에 이동하고 이름을 Scoreboard.css로 변경한다. Scoreboard 컴포넌트에 Scoreboard.css를 import 하는 구문을 추가한다. webstorm의 리팩토링 기능을 잘 활용하면 어렵지 않게 할 수 있다.

기존에 보던 화면과 좀 달라질 것이다. 왜냐하면 bootstrap CSS 프레임웍이 포함되었기 때문이다. 그러므로 CSS 프레임워크를 사용한다면 반드시 처음에 import해야 한다. 중간에 추가하게 되면 기존 작업하던 화면이 모두 깨지게 된다.

css를 모듈로 import 하기

Scoreboard.css를 import하게 되면 global 영역으로 import가 된다. 개발자툴로 확인해보면 header 태그에 css가 추가된것을 알수 있다. 이제 scoreboard 페이지 뿐만 아니라 다른 페이지도 추가되므로 global로 적용하게 되면 다른 페이지에도 디자인에 영향을 주게 된다. 해당 css를 scoreboard 페이지에만 영향을 미치도록 모듈로 import 하도록 한다.

먼저 Scoreboard.css 를 Scoreboard.module.css로 변경하고 js에서 import 시 아래와 같이 수정하고 className 부분도 수정한다.

개발자툴에서 scoreboard 클래스를 확인해보면
Scoreboard_scoreboard__11B7R 이런식으로 컴포넌트명_클래스명_xxxx 으로 변경하는 방식으로 local scope 를 적용하게 된다는것을 기억하자.

element 스타일을 class 스타일로 변경하기

module로 스타일을 정의한 부분은 class에만 해당된다. 엘리먼트에 적용한 부분을 모듈로 바꿔지지 않고 글로벌로 적용된다. 그러므로 만일 module에 엘리먼트 스타일로 적용된 부분이 있다면 클래스 형태로 변환하고 엘리먼트 스타일은 글로벌 스타일로 정의하는 것이 바람직하다.

className에 여러개의 클래스를 적용할때

className에 여러개의 클래스를 사용할려면 스페이스로 한칸씩 연결해야 한다. (아래 note 참조). 이런 불편함을 없애기 위해서 classnames라는 3rd party 라이브러리를 설치해서 사용한다.

player 컴포넌트 리팩토링

css에 클래스가 아닌 엘리먼트 스타일은 모듈 방식으로 적용되지 않는다. 모듈방식으로 변환되는 위의 로직을 이해한다면 당연하게 받아들여진다. 그러므로 엘리먼트로 추가한 부분은 모두 클래스로 변환해야 한다.

css에서 svg로 적용된 부분을 .svg로 변경한 후에 컴포넌트에 적용해보자.

Counter 컴포넌트 리팩토링

className=”counter-action decrement” 이와 같이 두개 이상이 연결된 부분은 classnames 라이브러리를 사용해서 연결한다.

AddPlayerForm 컴포넌트 리팩토링

Scoreboard.css 에 엘리먼트 형태의 스타일에는 모두 .을 붙여서 클래스형태로 변환한다. form, input에 클래스를 적용하고 결과를 확인한다.

Header 컴포넌트 리팩토링

header와 h1에 클래스를 적용한다.

Stats 컴포넌트 리팩토링

Stopwatch 리팩토링

etc

– note