(3)-2 웹 애플리케이션 만들기 - React로 방만들기 창 구현하기

 

 

이전 글에서 크기 콤보박스까지 만들어서 렌더링해봤다.

 

이번 글에서 나머지를 작성해보자

 

map 콤보박스는 크기 콤보박스에서 만들어놓았던 컴포넌트를 사용할 것이다.

 

1. Combobox 컴포넌트를 이용하여 map 추가 

const maps = [
    {
        key: 1,
        name: "숫자"
    },
    {
        key: 2,
        name: "과일"
    },
    {
        key: 3,
        name: "여자아이돌 그룹"
    },
    {
        key: 4,
        name: "남자아이돌 그룹"
    },

maps 배열을 위에 선언해준 뒤 

<Combobox name="map" options={maps} key={"map"} />

위 코드를 크기 콤보박스 생성한 줄 아래에 쓰고 렌더링 해보면

 

잘 뜨는 것을 확인할 수 있다.. 이건 똑같은 컴포넌트를 이용한 것이기 때문에 자세히 적지는 않겠다.

 

 

 

2. 공개 비공개 라디오 버튼 만들기 (Checkbox.jsx를 components 아래에 생성)

 

import React, { Component } from 'react';

import './Checkbox.css'

function Checkbox(){

    return (
        <div className="checkboxdiv">
            
                <label><input type="radio" name="isSecret" value={false}/>공개</label>
                <label><input type="radio" name="isSecret" value={true}/>비공개</label>

            
        </div>
        


    );

}

export default Checkbox;

같은 label로 주어야 중복 체크가 안된다 

(나는 비공개와 공개 중 하나만 선택할 수 있게 해야하기 때문에)

 

다 작성한 뒤에 MakeRoom.jsx에서 렌더링 하면 

 

 

잘 뜨고  중복 체크도  안되는 것을 확인할 수 있다

 

 

 

 

3. Nameinput 컴포넌트를 이용하여 암호칸 입력하는 곳 만들기 

 

(3)-1에서 만들어놓은 Nameinput을 이용하여 만들건데, props로 만들어놨던 isDisable은 여기서 true값을 줄것이다 (라디오 버튼이 비공개가 체크가 되면  활성화를 되도록 나중에 하기 위해서)

 

<Nameinput name="암호" isDisable={true} />

를 쓰고 렌더링

 

 

회색으로  색칠되어 있고 여기는 작성할 수 없다 (잘 된것이다)

 

 

 

4. Combobox 컴포넌트를 이용하여 인원수 부분 만들기 (방에 들어올 수 있는 최대 인원수)

 

최대 인원을 5명~8명으로 선택할 수 있도록 배열을 만든다.

const peoples = [
    {
        key: 5,
        name: "5명"
    },
    {
        key: 6,
        name: "6명"
    },
    {
        key: 7,
        name: "7명"
    },
    {
        key: 8,
        name: "8명"
    },
]

그리고 Combobox에 배열을 넘겨준다

<Combobox name="인원수" options={peoples} key={"people"} />

 

 

그리고 react app을 확인해보자

 

 

5. 확인, 취소 버튼 추가

 

이전에 만들어놓았던 Button 컴포넌트 이용

 

<Button name="확인" />
<Button name="취소" />

 

 

이렇게 방만들기 창을 완성했다 !