[TIL] 05.12 Formik 2

Formik 1 버전에서 2 버전으로 업뎃을 하면서 생긴 수정사항들에 대해서 대응하는 작업을 하였다. 

Formik 2 는 Hook을 기반으로 만들어져 React 16.8.x 이상이어야 하고 타입스크립트를 사용한다고 하면 unknown 타입을 사용하기 때문에 TypeScript 3.0 이상을 사용해야 한다.

 

1. resetForm

// Formik 1
resetForm(nextValues);

// Formik 2
resetForm({ values: nextValues /* errors, touched, etc ... */ });

 

2. <Field>

필드에서 기존에는 render로 props를 내려 주었는데 앞으로 버전에서는 children으로 받는 방식을 사용할 것이기 때문에 아래와 같은 방식으로 변경을 해야한다. (공식문서에서도 변경할 것을 권장하고 있다.)

// 이전 방식
<Field name="firstName" render={props => ....} />

// 지금 방식
<Field name="firstName">{props => ... }</Field>

 

기존의 방식에서 변경을 하다 보니 children으로 props를 내려줘야 했는데 어떻게 내려줘야 할지 고민이 되었다. 

검색을 해보니 React.elementClone과 ContextAPI를 사용하는 2가지 방법이 있었다. 코드가 간결한 React.elementClone를 사용하여 해결을 하였다. 

1. React.elementClone

//React.cloneElement(children,{넘겨줄 값})

import React from 'react'

const Parent = ({
	children,
    ...rest
}) => {

    return (
        <div>
            {React.cloneElement(children, {...rest})}
        </div>
    )
}

 

2. Context API

import React, { useState } from 'react';

const { Provider } = React.createContext({ child: "Tom" });

const Parent =({
    child,
}) => {
    const [value, setValue] = useState({child: "Jone"})

    return (
      <Provider value={value}>
        <children />
      </Provider>
    );
}

const children = () => {
    
    return ( 
        <div>
            {value => {value.child} </p>}
        </div>
    );
}