[React] Ant Design으로 Form 만들기 #antd

React로 쉽고 이쁘게 페이지를 만드려고 하다가 찾은 antd.

 

써보려고 하니 여기저기서 문제가 생겨 이걸 내가 굳이 왜 쓰는거지 라는 생각도 들었지만 일단 열심히 써봤다.

 

Layout

기본적으로 지원하는 레이아웃인데 커스텀하려고 하니 이것저것 꼬이는게 많아서 고생했다. CSS는 아직 너무 어려운 존재다...

 

import { Layout} from "antd";

const { Header, Content, Footer } = Layout;

class App extends Component {

	<Layout>
    		<Header/>
        	<Content/>
        	<Footer/>
	</Layout>
}

대충 이런식으로 쓰이는데 Footer라고 해서 제일 하단에 붙어있는게 아니였다.... 어짜피 내가 설정해줘야한다.

 

기본적인 틀만 잡고 Form으로 넘어가자.

render() {
    const { getFieldDecorator } = this.props.form;
    return (
    	<Form>
                <Form.Item>
                  {getFieldDecorator("email", {
                    rules: [
                      {
                        type: "email",
                        message: "올바른 이메일을 입력해주세요."
                      },
                      {
                        required: true,
                        message: "이메일을 입력해 주세요."
                      }
                    ]
                  })(
                    <Input
                      prefix={
                        <Icon
                          type="user"
                          style={{ color: "rgba(0,0,0,.25)" }}
                        />
                      }
                      type="email"
                      placeholder="Email"
                    />
                  )}
                </Form.Item>
	</Form>
    );
}

기본적으로 쓰는 Form의 내용들이다.

<Form>에는 <Form.Item>이 들어가고 그 안에서 여러가지 형식들이 정해진다. ex)이메일, 패스워드 등...

Input에 type을 정하면 그에 따라 rules를 정할 수 있다.

 

그리고 마지막에

export default Form.create({ name: "login" })(Login);

이렇게 꼭 써줘야한다.

 

+ 20.01.29 중국에서 만든거같고 정보도 너무 없어서 material-ui로 바꾸기로함 ㅋㅋㅋ