makeStyles Hook
- 사용자 정의 스타일을 적용할 수 있도록 makeStyles 를 사용하면 css속성을 정의한 객체를 값으로 갖는다.
- css로 html 태그에 className을 먹이는 것과 비슷하다.
커스텀 스타일을 적용하려면 makeStyles hook으로 작성한 함수를 호출한 결과를 classes변수에 저장한다.
그리고 커스텀 스타일이 필요한 곳에 className prop의 값으로 classes 변수에 저장된 클래스 이름을 넘긴다.
import {makeStyles} from "@material-ui/core/styles";
import {Box} from "@material-ui/core";
const useStyles = makeStyles({
home:{
backgroundColor: "black",
color: "white",
}
})
export default function Home (){
const classes = useStyles();
return(
<Box className={classes.home}>
homepage 입니다.
</Box>
);
}
- 위코드와 같이 @material-ui/core/styles 에서 makeStyles 훅으로 작성한 함수의 결과를 const useStyles라는 변수에 명시하고
컴포넌트 내용안에 classes 라는 변수로 useStyles()를 사용한다. 즉, makeStyles안의 내용이 곧 css내용과 같다고 생각하면 된다.
- 그리고 스타일을 적용할 클래스 이름은 {classes.home}으로 객체로 사용한다. 즉 객체로 직접 컴포넌트에 css를 먹인다.
- 코드에서 네이밍은 굉장히 중요하기 때문에 (코드 컨벤션과 관련이 크므로) 앞으로 makeStyles 를 사용할 때는 위와 같은 규칙을 적용하도록하자.
소감
- 처음에 Material-UI는 react에서 완벽하게 css를 대체할수 있을 ui 라이브러리라고 생각했다.
- 쓰면 쓸수록 공식문서를 찾아보면 볼수록 뭔가 용도가 달랐다.
일단, material 이라는 디자인 폼이 있다. google 에서 내놓은 안드로이드식 디자인 폼이 바로 그것이다.
어떤 컴포넌트를 내놓든 그냥 material ui를 사용하면 이쁜 마테리얼 디자인 폼으로 디자인되어 작동된다.
여러 디자인을 할필요없이 그냥 쓰면 마테리얼 디자인인 것이다.
- 추가로 구조화가 굉장히 잘되어 있어 코드 재사용이 매우 간결하고 수정도 쉽다.
디자인 요소를 굉장히 가미해서 프로젝트를 할 거면 css 그냥 사용하도록 하고
아니라면 materai-ui를 사용해서 소스를 적게잡고 가볍게 동작하도록 만드는 것이다.
장단점이 있어서 좋은것 같다.
일단 두가지 모두 사용해서 만들어보자.