[React] UI 디자인 툴 - 카카오 오븐 사용하여 사이트 디자인해보기- 로또 번호 랜덤 생성 사이트 만들어 보기 2편

이번 포스팅에서는 로또 번혼 랜덤 사이트를 만들어보기 위해 아래 기능을 만들어 보려고 합니다.

 

1. 1~46번까지 사용자가 체크 박스로 번호를 선택하는 기능을 만든다.

2. 사용자가 체크 박스에 선택한 번호로 랜덤으로 6개의 번호를 선택한다.

3. 사용자가 뽑은 랜덤 번호를 히스토리로 보여준다.

 

React는 Component 구조를 가지고 있습니다.

그렇기에 우리가 만들려고 하는 구조를 React 스럽게 모두 컴포넌트로 쪼게야 합니다.

그러기 위해선 바로 코딩을 하기보단 어떤 구조로 Component를 만들지 고민해봐야 합니다.

 

카카오 오븐을 사용한 사이트 간단 스케치 

 

먼저 화면을 디자인 해보는 것이 중요합니다.

화면을 디자인하실때는 파워포인트나 그림판도 좋습니다. 

간단하게 화면을 그려보는 것이 좋죠.

 

최근 UI 디자인 툴 사이트가 많아졌는데 간단한 사이트 이므로 "카카오 오븐"을 사용하여 사이트 디자인을 해보겠습니다.

 

https://ovenapp.io 

OvenApp.io

위 사이트를 간단히 가입하시고 이메일 인증을 끝내면 스탠다드로 무료로 사용이 가능합니다.

 

 

 

가입 후 "새로운 프로젝트 만들기" 버튼을 클릭하여 UI 디자인을 시작합니다.

 

 

 

원하시는 PC 사이즈를 선택하시고 사이트 정보를 입력한 다음 새로운 프로젝트 만들기 버튼을 클릭하여 생성합니다.

 

 

 

이제 파워포인트 같은 페이지에서 사이트를 디자인 해볼게요.

사이트를 디자인할 때 가장 먼저 해야 하는 건 그리드를 나누는 일입니다.

그리드 나눈다는 의미는 집 인테리어를 할 때 방을 나눈다고 생각하면 됩니다.

그리고 React에서는 Component를 나눈다고 생각하시면 됩니다.

 

Shape - 사각형을 이용하여 그리드를 나눌게요.

 

 

색상은 나중에 변경할 수 있기 때문에 우선 구조를 확실히 볼 수 있도록 구분 지어 나눠 줍니다.

border도 사용할 수 있는데 효과 -> 테두리 -> 사용을 하시면 border도 넣으실 수 있습니다.

 

테두리를 사용하시면 아래와 같은 그림이 나오네요

 

 

이제 그리드를 나눴으니 각각의 기능에 맡게 채워 넣어 줄게요.

lotto-header 에는 사이트 이름과 최신 당첨 번호가 나오도록 할 예정입니다.

 

아래와 같이 제목과 최신 로또 번호를 넣어줄게요.

참고로 로또 번호는 이미지로 우선 대체했습니다.

 

 

이제 lotte-side-menu에 랜덤으로 생성할 번호를 선택하는 기능을 넣을 예정입니다.

체크 박스와 버튼을 이용하여 생성해줍니다.

생성 팁은 4개의 체크 박스를 그룹으로 묶은 뒤 복사한 다음 정렬을 이용하시면 빠르게 생성이 가능합니다.

 

 

 

4개의 체크 박스를 그룹으로 묶으신 뒤에 46개의 번호가 필요하기 때문에 11개를 복사해 줍니다.

 

 

복사 한 뒤 마지막 체크 박스를 간격을 두고 정렬을 하시면 깔끔하게 화면 배치가 가능합니다.

1. 정렬 > 정렬 > 왼쪽으로 수평

2. 정렬 > 배열 > 수직

 

 

 

이제 lotto-contents에 생성된 번호를 표시해 주 겠습니다.

List형태로 표시되도록 디자인해줄게요.

 

 

디자인이 모두 끝났습니다.

간단하게 디자인해보면서 우리는 React 개발 시 어떻게 Component를 나눌까 고민을 해야 합니다.

 

React의 Component는 그리드를 기본으로 그리드 안에 콘텐츠들도 모두 쪼개서 나누는 것이 중요합니다.

그렇다면 여기서 어떻게 나누는 것이 좋을까요?

 

제가 생각하는 나눠야 하는 Component 요소를 빨간 박스로 해볼게요.

생각해야 하는 건 Component를 나누는 기준은 정답은 없습니다.

 

 

 

1. 최근 당첨 번호를 보여주는 Component

2. 체크 박스를 모아 보여주는 Component

3. 랜덤 번호를 생성해주고 표시해주는 Component

4. 체크 박스 하나를 표현해주는 Component

 

그리드를 포함하여 3개 그리고 각각의 요소 4개의 Component를 구성하여 이제 사이트를 개발해 보겠습니다.

7개의 Component를 만들겠죠?

 

1번은 3번 번호를 생성해주는 곳에 재활용할 예정입니다.

3번은 번호를 담는 Component라고 생각하시면 돼요

 
컴포넌트가 이해 안되신다고 걱정하지 마세요. 다음편 Component 만들기를 통해 이해를 도와 드리겠습니다.

 

React로 로또 번호 랜덤 사이트 만들어 보기 강의 목록

1편 - [React] React 프로젝트 생성하기

2편 - [React] UI 디자인 툴 - 카카오 오븐 사용하여 사이트 디자인해보기

3편 - [React] React Component 분리 및 생성 하기

4편 - [React] state와 componentDidMount 활용 페이지 만들어보기

5편 - [React] props 하위 Component 값 전달하기 

6편 - [React] Javascript 로또 번호 생성 알고리즘

7편 - [React] 로또 당첨 번호 API 사용하여 Get API 만들기, 화면 호출하기