코드숨 리액트 6기 7주차 회고

https://mobx.js.org/README.html
https://ko.redux.js.org/introduction/getting-started/
  1. 각각의 input에서는 form에서 시작해서 props로 타고타고 넘겨주는 value와 onChange 등의 함수를 사용해야 하고

useForm

먼저 useForm hook의 경우 전달받은 초기화 값을 기반으로 values state를 만들고, 이 state를 업데이트하는 changeValues를 반환합니다.

// userForm.jsexport default function useForm({ initialValues = {} }) {  const [values, setValues] = useState(initialValues);  const changeValues = (newValues) => {    setValues((prevValues) => ({ ...prevValues, ...newValues }));  };  return { values, changeValues };}

Form

Form 컴포넌트는 useForm을 호출하여 리턴받은 values와 changeValues를 context에 주입하고 내부에 children을 렌더링합니다.

// Form.jsx// { form: { values, changeValues } }
export default function Form({ form, children }) {
return ( <FormContext.Provider value={{ form }}> <form> {children} </form> </FormContext.Provider> );}

FormItem

export default function FormItem({ label, name, children }) {  const { form } = useContext(FormContext);  const value = form.values[name];  const onChange = (newValue) => {    form.changeValues({ [name]: newValue });  };  const content = useMemo(() => (    <FormItemContext.Provider value={{ value, name, onChange }}>      <div>        <label htmlFor={name}>{label}</label>        {children}      </div>    </FormItemContext.Provider>  ), [value, label, name]);  return (    <>      {content}    </>  );}

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store