[clone coding-devflix] CSS 모듈

react에서 styling해주는 방법은 

css파일을 만들어 한번에 import 해주거나 또는

각 컴포넌트들과 묶어서 css를 import해주는 방법이 있다. react는 각 부분부분을 나누어 쓰는 컴포넌트화 시키는 것에

의미가 있기에

이런식으로 index.js파일을 포함한 폴더를 만들어서 default로 내보내주면 인식이된다.

음 .. index라는게.. 의미가 크구나 싶다. 아직 잘 이해는 안간다 계속 봐야 할듯 하다.

 

그런데 css를 하다보면 class명을 주기가 참 까다롭다. class명이 중복되지 않도록 코드를 짜는게 상당히 성가시다.

물론 같은 class를 줘서 함께 prop을 주기는 좋지만~ 코드가 방대해지다 보면 다른 부분과 겹칠 가능성도 농후한데

react에서는 css모듈이라는 것을 이용한다. 

css를 global이 아닌 local화 시키는 것이다. 좋은데?! 각 부분별로 local로만 class명을 쓸 수 있으면 상당히 편리 할 듯 하다.

 

먼저 해줘야 할것은 Header.css 명을 Header.module.css라고 변경해준다. 모듈이라고 선언해주는 것이라 생각하자

그리고 import방식을 자바스크립트 임포트처럼 변경해주고

className에  중괄호로 감싼후 styles.navList로 바꾸면 이렇게 적용이 잘된다~

그리고 inspect해보면~ 짜란~ Header_navList_226kJ 음 난 저런 className을 준적이 없는데...

임의로 설정해준다.. 직관적이군.. Header의 navList이고~ 226kj라는 이름을 하나 더줬다.

다른 컴포넌트에서 쓰면 또 다른 이름이 생성이 되고~ 각 모듈마다 중복되지 않게 쓸 수 있다.

 

그러나~ 니코쌤왈 현재도 충분히 좋지만 className을 기억해야 하는 단점이 있다고 한다..

응?! className을 기억하지 않아도되? 뭐랄까 기억이라기보다는 각 className에 접근하려면 매번 그 코드에 가서 확인을 하는 번거로움이 있다. 이 또한 편리하게 할 방법이 있는건가>?

 

바로 styled-components 를 설치하면 된다~ npm install styled components

설치해주고 이제 styled-components를 사용하니 폴더에서  Header.js를 빼주고 css import 를 삭제해준다.

그리고 styled를 import해주고 List라는 styled components를 만들어 준다

그안에 템플릿 리터럴을 이용해 css코드를 작성해주고 적용될 ul태그를 List라는 styled components를 넣어주면

끝!!!!

여전히 적용이 잘된다~!~!~!

https://styled-components.com/

styled-components

styled components 공식 사이트이다 doc을 한번 살펴보자~

 

이렇게 해주면 자바스크립트 안에 css가 함께 있게 되고 컴포넌트만 바꿔주면 된다~!~!~!

와웅.... 태그들을 컴포넌트로 대체해주는 것이네... 멋지다

여기에 추가로 a태그를 쓰지 않고 react-router-dom 에서 제공하는  Link함수를 사용해보겠다.

스타일 컴포넌트인 Link와 겹치므로 컴포넌트를 SLink로 명을 바꾸어 주고 html 함수는 styled.tag

를 사용하지만 Link를 사용할때는 styled(Link)로 시작하고 템플릿 리터럴을 적용하면된다

그리고 a태그 대신 SLink 컴포넌트를 넣어주고 href를 사용하지않고 to를 사용하며 ㄴ된다~~

 

이렇게 써주고나면 에러가 하나 발생할텐데 바로

이코드 때문이다. Link를 사용하기 위해서는 Link를 사용한 컴포넌트를 Router안에 써줘야 한다고 한다.

 App.js 에서 Header컴포넌트를 삭제해주고 ㄱRouter.js에서  Router안에 Header를 넣어주면 해결된다.

 

앞서 언급 했듯이 react에서 css를 활용하는 방법은 여러가지이지만

이렇게 자바스크립트와 css를 한번에 활용할 수 있는 방법이 가장 좋을 듯 하다.

뭐 익숙해지는데 시간이 걸리겠지만 적응하면 될 일이다.