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

 

이번에는 로비에서 방만들기 버튼을 누르면 뜨는 창을 만들어보도록 하자! (로비는 조금 하긴 했는데 서버랑 연결해야하는 부분이 있기 때문에 나중에 작성하도록 하겠다..)

 

 

기획서에서 그려봤던 화면은 이러하다..

 

필요한 component들을 정리해보자면

-> 이 창 자체는 MakeRoom.jsx이고

-> (1)에서 만들었던 Template.jsx 사용 

-> text를 입력하는 Nameinput.jsx 

-> 목록 중에서 선택할 수 있는 Combobox.jsx 

-> 라디오 버튼 구현하는 Checkbox.jsx (원래 이름은 라디오버튼으로 해야하는데 처음에 체크박스인줄 알고 만들었다가 이름수정 아직 안함;;)

-> 아직 안적었지만 로비창 구현할 때 만들어놨던 Button.jsx 사용 (이건 확인버튼과 취소버튼을 만들때 사용)

 

들이다 !!

 

---

1. MakeRoom.jsx 생성

 

Template 컴포넌트안에  모든 요소들을 넣어줄 거임

 

src 폴더 아래에 MakeRoom.jsx를 생성하고 <Template ></Template>을 return 해주자 

 

 

저장하고 확인하면 잘 뜨는 것을 볼 수 있다 

이제 이 템플릿 컴포넌트 안에 내용들을 넣어보자

 

2. "방만들기" 글 쓰기

<div>
	<h1>방 만들기</h1>
</div>

 

<Template> </Template>사이에 위의 코드를 적고 확인.

 

 

 

 

글자를 가운데로 정렬하는 것은 나중에 할 것이기 때문에 일단 넘어가도록 하자 (잘 뜨는지 확인만)

 

 

3. Nameinput.jsx 생성 (components 폴더 아래에)

import React from 'react';
import './Nameinput.css'

const style = {
    width : '300px',
    height: '30px'
}
    function Nameinput({name,isDisable}){

        return(
            
            <div>            
                <h2>{name}</h2>
                <input type="text" placeholder="입력하세요"  style={style} disabled={isDisable} />
                
            </div>


        );
    }



export default Nameinput;

 

 

여기서 properties를 name과 isDisable 을 주었는데  name 은 입력창 옆에 어떤 입력창인지 설명해주는 글을 위한 것이고, isDisable은 값이 true일 때 입력창을 비활성화 시키기 위함이다 (나중에 암호에서 사용)

 

지금은 제목을 위한 Nameinput만 사용할 것이고 그건 비활성화를 주면 안되기 때문에 MakeRoom.jsx에서 

<div>
	<Nameinput name="제목" isDisable={false}/>
</div>

 를 선언해보고(방만들기 아래에) 확인해보자

 

 

잘 나오는 것을 확인할 수 있다. 제목이라는 글자가 가운데에 위치하는 것은 <h2> 태그의 css 를 수정했기 때문이다

 

 

 

 

4. Combobox.jsx 생성 (components 폴더 아래에)

 

import React, { Component } from 'react';
import './Combobox.css'

//배열을 받아서 배열안에 있는 값들을 콤보박스에 넣어준다..
//option 배열은 [{key,name들을가진다}]
function Combobox(props){
    
    return (
        <div>
            <h2>{props.name}</h2>

        <form>
            <select className="selectbox">
                <option value="select">=============선택=============</option>
                {props.options.map(option => {
                return <option key={option.key} value={option.name}>{option.name}</option>
            })}
            </select>
        </form>
        </div>


    );

}

export default Combobox;

주석처리를 해놨는데 배열을 받으면 배열에 있는 값들을 콤보박스 안에 넣어주는 것이다. (map함수 사용)

배열은 일단 MakeRoom.jsx에서 선언해놨다

 

 

 

sizes라는 배열안에 위와 같이 값을 넣고 

 <Combobox name ="크기" options={sizes} key={"size"}/>  코드를 추가해보자. 

 

 

컴포넌트가 잘 렌더링 되고 콤보박스를 클릭해봤을 때

 

 

 

목록값들도 잘 뜬다 ! 

 

 

 

 

나머지는 다음 글에서 작성하도록 하겠습니다 --> 다음글 click!