해결된 질문
24.06.12 23:13 작성
·
92
0
안녕하세요
멋진 강의 잘 듣고 있습니다.
Todo에서 ReadComponent.js 안에서 read 할때 const makeDiv = () => () 와 같이 Arrow Function을 사용해서 간단하게 표현해주셨는데요,
수정할때도 간단하게 사용해보고 싶어서
Product의 ModifyComponent.js 에서 아래와 같이 만들어 사용해봤습니다.
{makeDiv("name", product.pname, "text", handleChangeProduct)}
{makeDiv("description", product.pdesc, "text", handleChangeProduct)}
{makeDiv("price", product.price, "number", handleChangeProduct)}
const makeDiv = (title, value, type, handleChangeProduct) => (
<div className="flex justify-center">
<div className="relative mb-4 flex w-full flex-wrap items-stretch">
<div className="w-1/5 p-6 text-right font-bold">{title}</div>
<input
className="w-4/5 p-6 rounded-r border border-solid border-neutral-300 shadow-md"
name={title}
type={type}
value={value}
onChange={handleChangeProduct}
></input>
</div>
</div>
);
만들어보니까,
price(넘버)는 수정이 되는데,
pname과 pdesc는 수정이 안되더라구요, readOnly가 먹혀있었습니다.
text와 number가 다른걸까요...
수정이 안되는 이유가 뭔지 궁금합니다ㅠ
추가로, const makeDiv 는 return 아래에 추가를 해주셨는데,
return 위에가 아니라 return 아래에 추가한 이유도 궁금합니다.
확인 부탁드립니다.
감사합니다.
답변 1
0
2024. 06. 13. 00:28
{makeDiv("name", product.pname, "text", handleChangeProduct)}
{makeDiv("description", product.pdesc, "text", handleChangeProduct)}
{makeDiv("price", product.price, "number", handleChangeProduct)}
이 동작하지 못하는 이유는 첫번째 파라미터가 input 태그의 name 속성값으로 사용되고 handleChangeProduct에서는 name 속성값을 이용해서 product객체를 수정하기 때문에 이름이 일치해야만 합니다.
예를 들어
{makeDiv("pname", product.pname, "text", handleChangeProduct)}
{makeDiv("pdesc", product.pdesc, "text", handleChangeProduct)}
와 같이 사용하셔야만 합니다.
--
별도로 분리되는 함수라 위치는 중요하지 않았습니다. 좀 더 깔끔하게 별도의 파일로 뺄 수도 있었겠지만 재사용성이 떨어져서 컴포넌트 내에 있는게 낫겠다고 생각했습니다.