개인 개발 프로젝트/Material-UI 실습 12

[Material-UI 실습] 2. Material-UI 설치 및 컴포넌트 이용하기

Material-UI를 사용하기 위해 다음과 같이 명령어를 입력하여 모듈을 설치한다. npm install @material-ui/core package.json 파일의 dependencies에 @material-ui/core 모듈이 추가되었는지 확인한다. 리액트의 컴포넌트에는 두 가지 종류가 있다. 함수형 컴포넌트와 클래스형 컴포넌트이다. 둘의 차이를 여기서 설명하진 않겠다. Material-UI 웹 페이지에서는 제공하는 대부분의 예제가 함수형이므로 클래스형으로도 한번 작성해보고 싶어 여기서는 클래스형으로 컴포넌트를 생성하였다. Create React App에서 App.js는 함수형으로 작성되었으므로 클래스형으로 수정한다. App.js import React from 'react'; import Mai..

[Material-UI 실습] 1. Create React App 생성

새로운 React 프로젝트를 시작하기 위해 Create React App을 생성해야한다. 프로젝트를 생성할 위치에서 다음과 같이 명령어를 입력하여 create-react-app 모듈을 설치한다. Node js 설치되었다고 가정였다. npm install -g create-react-app 그리고 앱을 생성상하기 위해 다음과 같이 명령어를 입력한다. 프로젝트 이름은 material-ui-tutorial로 설정했다. create-react-app material-ui-tutorial 그리고 생성된 프로젝트를 확인하기 위해 프로젝트 위치로 이동한다. cd material-ui-tutorial 다음과 같은 구조로 프로젝트 생성됨을 확인할 수 있다. 확인을 위해 다음과 같이 명령어를 입력하여 프로젝트를 실행한다...