로토의 블로그
ant design 3.x -> 4.x 주요 변경사항 대표 이미지

ant design 3.x -> 4.x 주요 변경사항


최근 만들고 있는 대부분의 어드민 툴은 ant design으로 만들고 있다.

얼마전에 3.x 대 버전에서 4.x로 버전업을 했는데, 달라진 부분들이 좀 있어서 마이그레이션 해본 김에 정리를 조금 해본다.

크게 두 개의 컴포넌트에 대격변이 있었다.

Form

form hooks 추가

코드로 보면 확실히 느껴지는데 이랬던 코드가

// 3.x form
function SimpleForm({ form }) {
  const handleSubmit = () => {
    form.validateFields((err, values) => {
      // form 값은 values에 들어있음
    })

}

return ( <Form onSubmit={handleSubmit}> <Form.Item label=“사용자명”> {form.getFieldDecoretor(‘username’)(<Input />)}
</Form.Item> <Button htmlType=“submit”>submit</Button> </Form> ) }

export default WrappedSimpleForm = Form.create()

이렇게 변했다.

// 4.x form
function SimpleForm() {
  const handleFinish = (values) => {
  }
  const hanleFinishFailed = (errorInfo) => {
  }

return ( <Form onFinish={handleFinish} onFinishFailed={handleFinishFailed}> <Form.Item label=“사용자명” name=“username”> {form.getFieldDecoretor(‘name’)(<Input />)} </Form.Item> <Button htmlType=“submit”>submit</Button> </Form> ) }

기본적으로는 form 객체를 통하지 않고도 컨트롤 할 수 있도록 변경한 것으로 보이며, 기존처럼 form 객체를 통해 디테일한 컨트롤이 필요한 경우 useForm hooks를 이용하면 되는 것 같다.

이 경우 useForm으로 만든 form을 Form의 props로 넘겨주면 된다.

function SimpleForm() {
  const [form] = useForm()

useEffect(() => { // form을 직접 조작하기 form.setFieldsValue({ username: ‘roto’ }) }, []) const handleFinish = (values) => { } const hanleFinishFailed = (errorInfo) => { }

return ( <Form form={form} onFinish={handleFinish} onFinishFailed={handleFinishFailed}> <Form.Item label=“사용자명” name=“username”> {form.getFieldDecoretor(‘name’)(<Input />)} </Form.Item> <Button htmlType=“submit”>submit</Button> </Form> ) }

이렇게만 놓고 보면 사용성이나 가독성이 이전에 비해 월등하게 좋아졌다.

onSubmit props가 onFinishonFinishFailed 두 개로 나뉜 것도 눈여겨볼만 하다.

마이그레이션 해야합니다.

campatible form의 class명 변경

Icon

모듈 분리

컴포넌트화

그외

마이그레이션을 하면서 그외에 느꼈던 자잘한 변경사항들도 있다.

Row

Row 컴포넌트가 flex 기반이 되었다. 그래서 불필요하게 <Row /> 로만 래핑해둔 친구들은 레이아웃이 깨진다. div로 바꾸던가 빼자.

자세한 변경점은 https://ant.design/docs/react/migration-v4 여기에 잘 정리가 되어있다.

IE는 11만 지원

React 16.9 이후만 지원

맺으며

한땀한땀 마이그레이션을 마치고 난 후에 https://github.com/ant-design/codemod-v4 이런 도구의 존재를 발견했다.

작업하기 전에 문서를 먼저 꼼꼼히 읽는 습관을 들이도록 하자.....