[React]Material-kit-react-main 활용 프로젝트 만들기

src폴더 

 

App.js 파일

다음과 같은 코드로 theme과 style을 받아옴

Theme의 경우 { ThemeProvider } from '@material-ui/core'; 를 import 하여 사용

<ThemeProvider theme={theme}>
	<GlobalStyles />
</ThemeProvider>

 

index.js 파일

App 컴포넌트 import 하여 사용함 

해당 파일을 public폴더의 index.html 파일의 div id="root" 에서 사용

route.js 파일에 경로 정보 작성되어있음

경로에 따라 DashboardLayout과 MainLayout으로 레이아웃 구성이 달라짐

 

BrowserRouter 사용 => 경로, 라우팅 관련 추후 추가 공부할 것

(같은 경로 내 routes.js, serviceWorker.js 파일 추후 추가 공부할 것)

 

 

---

src/theme 폴더

index.js파일 

백그라운드, 텍스트 메인 컬러 조정

typography.js 에서 <h>태그 사이즈 조정함 

 

h1: {
    fontWeight: 500,
    fontSize: 46,
    letterSpacing: '-0.24px'
  },
  h2: {
    fontWeight: 500,
    fontSize: 38,
    letterSpacing: '-0.24px'
  },
  h3: {
    fontWeight: 500,
    fontSize: 32,
    letterSpacing: '-0.06px'
  },
  h4: {
    fontWeight: 500,
    fontSize: 28,
    letterSpacing: '-0.06px'
  },
  h5: {
    fontWeight: 500,
    fontSize: 24,
    letterSpacing: '-0.05px'
  },
  h6: {
    fontWeight: 500,
    fontSize: 14,
    letterSpacing: '-0.05px'
  },
  overline: {
    fontWeight: 500
  }

 

 

---

src/pages폴더

: 해당 폴더에 페이지들(view)을 모아놓았다.

예를들면 dashboard화면은 Dashboard.js이고  customers 화면은 CustomerList.js 파일이다.

각각의 페이지 파일에서 각각의 스타일을 위한 컨테이너와 그리드 등의 설정을 material-ui를 사용하여 조정한다.

 

웹페이지의 레이아웃을 잡을 때 컨텐츠를 화면 중앙에 위치시키기나 격자로 배치해야 할 때가 많이 있습니다. Material UI의 <Container/>와 <Grid/> 컴포넌트를 사용하면 이러한 웹페이지 레이아웃을 매우 쉽고 간단하게 잡을 수 있습니다.

 

react-helmet 라이브러리로 title을 관리한다. 이는 아래와 같은 이점이 있다고 한다.

• 문서 타이틀을 변경할 때
• 소셜 서비스에 포스팅 할 때
• 검색엔진 최적화가 필요할 때

각각의 페이지 파일에 필요한 컴포넌트들은 src/components 내의 각각의 폴더내에 있다.

---

src/components  폴더

GlobalStyles.js 파일

: 백그라운드 컬러 변경함

 

 

경로에 따라 DashboardLayout과 MainLayout으로 레이아웃 구성이 달라짐

MainLayout의 경우 login, register, 404 등의 경우 사용 그 외에는 대부분 DashboardLayout 사용하고 있음

 

 

DashboardLayout.js 파일

 

 

 

useState 사용

Hook이란?
React의 useState Hook을 사용해봅시다!

Hook이란? Hook은 특별한 함수입니다. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다!

언제 Hook을 사용할까? 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다.

 

 

useState를 호출하는 것은 무엇을 하는 걸까요? “state 변수”를 선언할 수 있습니다. 위에 선언한 변수는 count라고 부르지만 banana처럼 아무 이름으로 지어도 됩니다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.

useState의 인자로 무엇을 넘겨주어야 할까요? useState()Hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 0을 해당 state의 초기 값으로 선언했습니다. (2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야 합니다.)

useState는 무엇을 반환할까요? state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 const [count, setCount] = useState()라고 쓰는 이유입니다. 클래스 컴포넌트의 this.state.count와 this.setState와 유사합니다. 만약 이러한 문법에 익숙하지 않다면 현재 페이지의 끝에서 살펴볼게요.