상품(product) 수정시 const 사용이 안되는 이유

안녕하세요

멋진 강의 잘 듣고 있습니다.

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 아래에 추가한 이유도 궁금합니다.

확인 부탁드립니다.

감사합니다.

{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)}

와 같이 사용하셔야만 합니다.

별도로 분리되는 함수라 위치는 중요하지 않았습니다. 좀 더 깔끔하게 별도의 파일로 뺄 수도 있었겠지만 재사용성이 떨어져서 컴포넌트 내에 있는게 낫겠다고 생각했습니다.

인프런 커뮤니티 질문&답변