[공주찾기] Material-ui 적용하여 간단한 레이아웃 작업

[공주찾기] Material-ui 적용하여 간단한 레이아웃 작업하기

해당 게시글에서는 react 프로젝트에 material-ui를 적용하는 방법을 알아볼 것이다. material-ui를 사용하면 간단한 컴포넌트 사용이나, css 추가를 손쉽게 할 수 있다는 장점이 있다.

사전 준비사항

CRA를 이용하여 react 프로젝트를 생성하고 아래와 같이 폴더구조를 만들어주어야 한다. CRA로 react 프로젝트를 만드는 방법을 모르면 검색을 통하여 따라하면 된다. (추후, CRA를 통한 react 프로젝트 생성하는 방법을 알아볼 것이다.)

잘 모르겠으면 github 링크에서 clone을 받아 사용하도록 하자. 바로가기

React 프로젝트에 material-ui 추가하기

React 프로젝트에 material-ui를 추가하는 것은 크게 어렵지 않다. 해당 링크에 접속하여 따라하면 그만이다. 바로가기

해당 사이트에 접속하면 아래와 같은 사이트가 표시될 것이다. 아주 자세하게 어떻게 사용할 수 있는 지 가르쳐주고 있다. 해당 사이트에서는 npm 명령어를 사용하여 추가하지만, 나는 yarn을 사용하여 추가하였다.

설치 명령어 : yarn add @material-ui/core

이제 우리의 react 프로젝트에 material-ui를 이용하여 이쁘게 꾸밀 수 있다.

Material-ui 적용하여 layout 구조

아주 간단한 프로젝트이기 때문에 css도 간단하게만 할 것이다. 엄청 이쁘게 할 필요 없다. 그냥 다른 사람이 보기에 불편하지 않을 정도로만 하면 된다. Tabs를 이용하여 간단하게 탭을 만들어 줄 것이다. 사용하는 예시는 해당 링크에서 확인해보자. 바로가기

해당 링크에 들어가면 아래와 같은 것이 보인다. 많은 것들이 있지만 사진에 있는 Simple Tabs를 이용하여 간단하게 만들 것이다. 우선 해당 코드를 복붙하여 프로젝트에 붙여넣자. 그리고 우리는 Tab이 2개만 필요하기 때문에 1개를 지워주도록 하자.

코드를 간단하게 정리하면 아래와 같다. 자세한 코드는 github에서 확인할 수 있다. 바로가기

결론

지금까지 간단한 탭을 만들어서 이동하는 것도, 일일이 html, css, javascript로 만들면 꽤 오래 걸릴 수 있는 작업이다. 그런데 material-ui를 이용하면 5분정도면 위 작업을 다 할 수 있다. 즉, 여기서 하고 싶은 말은 직접 다 만들 수 있지만, 내가 원하는 기능이나 컴포넌트를 다른 사람이 만들어 둔 것이 있으면 빠르게 찾아서 사용할 수 있는 능력도 필요하다는 것이다.

마지막

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