[외주] React input 태그 입력시 focusOut되는 현상

프로젝트에서 2차원 표 형식의 테이블에 input 태그를 이용해 값을 렌더링하는 부분이 있었다.

 

이 부분에서 수정이 가능해야 한다는 기능 요구가 있었다.

그래서 각 input 태그의 onChange 속성에 핸들러 함수를 할당했지만 한번 입력하면 포커스아웃되는 이슈가 있었다.

{
  tableData.map((data, idx) => {
    return (
      <div
        key={`tableData_${idx}`}
        className='w-fit flex content-center justify-between mb-3 pb-2 border-b'
      >
        {
          data.map((info, i) => {
            if (info.type === 'checkbox') {
              return (
                <div
                  key={`checkbox_${info.val}_${i}`}
                  className='px-3 py-2 min-w-20'
                >
                  <input
                    type='checkbox'
                  />
                </div>
              )
            }
            else if (info.type === 'input' && typeof info.val === 'string') {
              return (
                <div
                  key={`input_${info.val}_${i}`}
                  className={`min-w-32 flex justify-center content-center`}>
                  <Input
                    className='w-3/4 text-center'
                    value={info.val}
                    onChange={(e) => inputChangeHandler(e, idx, i)}
                  />
                </div>
              );
            }
            else {
              return (
                <div
                  key={`text_${info.val}_${i}`}
                  className={`px-3 py-2 min-w-32 text-center`}>
                  {info.val}
                </div>
              )
            }
          })
        }
      </div>
    )
  })
}

 

위의 코드를 보면 key의 값이 중복될 여지가 있는 코드이다.

 

이처럼 key값이 중복되면 input 값이 변경되면 focus를 잃어버릴 수 있다.

그러니 key값을 고유하게 만들어주자.

 

{
  tableData.map((data, idx) => {
    return (
      <div
        key={`tableData_${idx}`}
        className='w-fit flex content-center justify-between mb-3 pb-2 border-b'
      >
        {
          data.map((info, i) => {
            if (info.type === 'checkbox') {
              return (
                <div
                  key={`checkbox_${idx}_${i}`}
                  className='px-3 py-2 min-w-20'
                >
                  <input
                    type='checkbox'
                  />
                </div>
              )
            }
            else if (info.type === 'input' && typeof info.val === 'string') {
              return (
                <div
                  key={`input_${idx}_${i}`}
                  className={`min-w-32 flex justify-center content-center`}>
                  <Input
                    className='w-3/4 text-center'
                    value={info.val}
                    onChange={(e) => inputChangeHandler(e, idx, i)}
                  />
                </div>
              );
            }
            else {
              return (
                <div
                  key={`text_${idx}_${i}`}
                  className={`px-3 py-2 min-w-32 text-center`}>
                  {info.val}
                </div>
              )
            }
          })
        }
      </div>
    )
  })
}