데이터 업로드의 시작이었던 disabled

disabled를 mdn에서는 이렇게 설명하고 있다. Boolean disabled 속성이 있는 경우 요소를 변경하거나 포커스할 수 없거나 양식과 함께 제출할 수도 없습니다
내가 구성한 코드 구성상 데이터의 name이 반드시 필요하게 구성되어 있다.

case ADD_TODO:
          console.log(action.addtodo)
          console.log(action.addtodo.data)          
          // name이 같은 데이터를 찾는다 
          let data = state.items.find((ele:any) => (ele.name === action.addtodo.data))
          console.log(data); 
          // addData라는 변수에 action.payload 넣고
          const addData = Object.assign({}, data, { textBox: [...data.textBox, action.addtodo.data]})
          console.log(addData);
          // 데이터를 전체 state 값들과 합친다.         
              for (let i = 0; i<state.items.length; i++ ) {
                if(state.items[i].name === addData.name) {
                state.items[i] = addData
              }
            }      
          return Object.assign({}, state)

reducer에서 action을 통해 데이터를 받아 왔을 때 각 사진마다 글을 기록하기 위해서 id값으로 각 배열을 찾게 하지 않고 name을 찾도록 코드를 구성하였기 때문에 name값은 반드시 필요했다. 따라서 name값을 입력하지 않으면 등록을 불가하게 만들었고 추가적으로 가격 또한 입력하지 않으면 등록을 불가하게 만들었다. 그 해결책으로 disabled을 사용하였다. 앞서 블로깅하였던 유효성 검사 코드에서 보면

const onNameChange = (e:React.ChangeEvent<HTMLTextAreaElement>) => {
    setName(e.target.value)
    if (e.target.value.length < 2 || e.target.value.length > 20) {
      setNameMessage('2글자 이상 20글자 이하로 입력해주세요.')
      setIsName(false)
    } else {
      setNameMessage('올바른 이름 형식입니다 :)')
     * setIsName(true)
    }

  }
  const onPriceChange = (e:React.ChangeEvent<HTMLTextAreaElement>) => {
    const priceVali =  /^[0-9]+$/
    const priceCurrent = e.target.value;
    setPrice(priceCurrent)
    if (!priceVali.test(priceCurrent)) {
      setPriceMessage('숫자만 입력해주세요')
    } else {
      setPriceMessage('올바른 형식입니다.')
     * setIsPrice(true);
    }
  }

올바른 형식이면 setIsName(true) setIsPrice(true)가 되도록 설정하였다 true일 때만 등록이 가능하게 구성했기 때문이다.

<button type='submit' className='submitBtn' disabled={!(isName && isPrice)}>등록</button>

사실 간단한 코드일수도 있지만 처음 시도해봤던 기능이라 처음에는 고민을 많이 했고 다행이 구현이 되었다.