parent component
// AlbaCalc.jsx
const handleUpdate = (e) => {
setField({
...field,
[e.target.name]: e.target.value,
});
};
// (code...
<FormInput name='wage' value={field.wage} onChange={handleUpdate} />
์ฌ๊ธฐ์ FormInput
์ปดํฌ๋ํธ์ onChange
๋ฅผ props๋ก ๋๊ฒจ์คฌ๋ค.
child component
// FormInput.jsx
const FormInput = React.memo(({ value, name, onChange }) => {
return (
<>
<form>
<div className='labelBox'>
<label className='labelInfo'>
<h3>{name}</h3>
<input
name={[name]}
type='text'
min='1'
value={value}
onChange={onChange} // ์ฌ๊ธฐ ๋ถ๋ถ
/>
</label>
</div>
</form>
</>
);
});
์ฌ๊ธฐ์์ ๋งํ๊ฑฐ์๋๋ฐ.. change ๊ด๋ จ ๋ค๋ฅธ ํจ์๋ฅผ ์ถ๊ฐํ ๊ฒ๋ ์์๋ค. ๊ทธ๋ฅ props๋ก ๋๊ฒจ ๋ฐ์ onChange
๋ฅผ ๊ฐ์ ธ๋ค ์ฐ๋ฉด ๋๋๊ฑฐ์๋ค. ์ด๋ ๊ฒ ํฉ๋นํ ์๊ฐ. ๋ ๋ญ ๋ ์ฒ๋ฆฌํด์ผ ํ๋ค๊ณ ์๊ฐํ๋๋ฐ..
์ด์ ๊ธฐ๋ณธ ๊ธฐ๋ฅ์ ์์ฑํ์ผ๋ ์ถ๊ฐ ๊ธฐ๋ฅ์ ๋ฃ์ด์ผ๊ฒ ๋ค ๐
์ด๋ฒคํธ ๋ฐ์ ์ฒ๋ฆฌ๊ฐ ์๊ฐ๋ณด๋ค ์ด๋ ต๋ค. ๊ทธ๋๋ ๋ด๊ฐ ์ํ๋ ๋ฐ๋ก ๊ตฌํ์ด ๋๊ณ ์์ด์ ๋ฟ๋ฏํ๋ค. ๋ด์ผ์ ์ธ๊ธ ์ ์ฉํ๋ ๊ธฐ๋ฅ์ ์์ฑํด์ผ์ง.