[오류리뷰] map & input값 저장 & ref

1️⃣ 문제 상황

input의 값을 상태에 저장하기 위에 useRef()를 써서 ref.current?.value를 사용하여 값을 넘겨주는 식으로 코드를 짰다. 이게 input의 값이 하나일 때는 문제가 없었지만 이 인풋을 배열에 담아서 map()함수로 돌릴려고 할 때 문제가 발생했다.

2️⃣ 문제 이유

각 순서에 맞는 배열에 input의 value를 넣어줘야 하는데, map()함수로 돌려지고 있기 때문에, useRef()의 current는 항상 마지막의 input을 바라보고 있었다. 그래서 input 추가 버튼을 눌러서 input이 2개 이상이 된 상황에는 최신 인풋이 아닌, 다른 인풋들의 값을 변경해도 상태에 넣어지지 않았고, 최신 인풋의 값을 변경하면, 모든 순서의 값이 최신 인풋의 바뀐 값으로 변경되었다.

이 상황을 직면하고, 모든 걸 ref를 이용해서 처리하면 안된다는 말이 이해가 갔다. ref의 사용성이 좋긴 하지만 이런 상황에는 좋은 방법이 아닌 것 같다.

2️⃣ 해결 방법

ref를 쓰는 대신 e.target.value로 변경하였다. 이로 인해서 모든 문제가 해결되었다.

{projFuncs.map((item, index) => {
  return (
    <div key={index} css={inputContainerStyles.style2}>
      <input
        autoComplete="off"
        onFocus={() => setGuideMessage("구현 기능을 적어주세요.")}
        onChange={(e) => {
          putTextInFunc(e.target.value, index);
        }}
        id="myFunctions"
        type="text"
        css={inputStyles.style4}
        />
      <input
        onFocus={() =>
    	  setGuideMessage("이 기능의 기여도는 얼마나 되나요?")
                }
        onChange={(e) => {
          putContInFunc(e.target.value, index);
        }}
        type="number"
        step={10}
        min={10}
        max={100}
        defaultValue={0}
        css={inputStyles.style5}
        />
      {projFuncs.length > 1 ? (
        <button
          css={[`width: 30px;`]}
          onClick={() => {
            deleteFunc(item);
          }}
          >
          <Image src={Delete} alt="delete" width={20} height={20} />
        </button>
      ) : undefined}
    </div>
  );
})}