1. module-css
React에서 css를 적용하는 방법에는 여러가지가 있다. 그 중에서 나는 각각의 컴포넌트에 한해서만 적용되는 css-module 형태로 연습 중이다.
이 방법으로 css를 적용하게 되면, 해당 컴포넌트에만 적용되는 css가 가능해지기 때문에 프로젝트가 커지면서 class가 겹치더라도 충돌이 일어나는 것을 방직할 수 있다.
또한, css와 react의 문법을 한 컴포넌트에서 관리하는 styled-component와 달리 css문법은 css대로, React문법은 React대로 따로 관리할 수 있기 때문에 조금 더 정돈된 느낌의 관리가 가능하다.
성능상의 차이는 기본 css 적용 방식과만 다르고 취향차이라고 하는 것 같다.
사소한 오류
아래는 module-css 적용 방식을 연습하고 있는 도중 마주쳤던 문제점이다.
module-css를 불러오는 방식대로 사용할 이름과 경로를 각각 classes와 "./Header.module.css"로 지정했다.
이후 module.css파일에서 해당 class에 적용시킬 css를 지정해줬고,
react compoent에 적용시키려고 했으나, 다음과 같은 문제점이 발생했다.
classes 다음 .으로 적용하고자 하는 css를 지정하려 했으나, -를 인식하지 못하면서 main-image라는 class와 그에 해당하는 css를 적용하지 못했다.
해결
알고나니, React에서 script문법을 쓴다는 표시인{} 안에서는 .과 -를 적절히 인식하지 못한다는 것. 그래서 나는 다음과 같이 표현해야했다.
classes.main-image가 아닌,
classes["main-image"]로 표현하는 것이다.
대괄호와 ""를 사용하면서 .을 대신하는 것이다.
2. image 불러오기
페이지에 이미지를 적용하기 위해 기존 이미지 불러오는 방식대로 local경로를 지정해줬지만 동작하지 않았다.
React component에서는 기존 방식대로 이미지를 불러오는 것은 적용이 안된다고 한다. 그렇다면 이미지를 적용시키지 위해서는 어떤 방법을 취해야할까?
먼저 이미파일을 component나 module.css를 불러오는 것 처럼 불러와야한다. 어떤 이름으로 사용할지와 경로를 지정해준다. mealsImage를 이미지의 사용이름으로 하기로 했으니,
이후 지정해준 경로에 대한 사용명 mealsImage를 {}안에 두어 이용하면 이미지 적용이 문제없이 이루어진다.
