[Legacy][React] React 꾸미기 (material-ui 연동)

[React] React 꾸미기 (material-ui 연동)

이전 게시글에서 이어지는 내용입니다. 이전 게시글을 보지 않았다면 확인하세요. 이동하기

이번 게시글에서는 React 프로젝트에 mateiral-ui를 적용하는 방법을 알아보겠습니다.

material-ui 적용하기

mateiral-ui를 사용하는 이유는 간단합니다. 내가 필요한 컴포넌트가 있는데 다른 사람이 해당 컴포넌트를 이쁘게 만들었다면 그걸 사용하는게 개발 속도가 훨씬 빠릅니다. 이 이유로 mateiral-ui를 사용하고 material-ui뿐만이 아니라 다른 것들도 많으니 이후 프로젝트 진행 시 자신에게 맞는 것을 사용하면 좋을 것 같습니다.

material-ui 설치방법은 아주 간단합니다. 명령어 : yarn add @mui/material or npm install @mui/material 을 입력하시면 됩니다. 설치 하셨으면 해당 홈페이지로 이동해봅시다. 이동하기

material-ui 홈페이지에 보면 이미 생성되어 있는 component들이 많이 있습니다. 이 중 내가 사용하고 싶은 것을 가져다가 사용하면 됩니다.

한 가지 예를들면 Button 컴포넌트를 사용하고 싶은데 사용 방법을 모르겠다? Button을 클릭하고 코드를 오픈하면 코드가 다 작성되어 있습니다. 이것을 참고하여 개발하시면 됩니다.

그리고 컴포넌트들 마다 api가 있는데 (없는 경우 있을 수도 있음) 해당 api 문서를 보며 내가 필요한 props 값을 주거나 css className을 넘겨주면 됩니다.

그런데 만약 내가 custom하게 css를 만들어서 해당 컴포넌트에 적용하고 싶다. 이런 경우 material-ui에서 제공해주는 함수를 사용하시면 됩니다. 우선 해당 package를 설치해주어야 합니다. 명령어 : yarn add @mui/styles or npm install @mui/styles . 설치를 하였으면 makeStyles을 import 한 후 사용하시면 됩니다. 더 자세한 건 아래 이미지와 해당 홈페이지를 참고해보세요. 이동하기

 

이번 게시글은 여기까지입니다. 잘 되지 않는 경우 해당 github 주소에 들어가셔서 자신의 코드와 비교해보세요. 이동하기

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.