[에러노트] React map을 사용하여 컴포넌트에 key를 전달하는 경우 주의점

문제점

객체 요소로 구성된 배열을 순환하고, 각 컴포넌트에서 input이 입력될 때마다 배열을 변경하고 있다.

하지만 input을 입력하면 정상적으로 입력되지 않고 한 글자씩 툭툭 끊어지며 입력된다. 포커스도 input에서 해제된다.

문제가 되었던 코드

const Item = ({ data, setData }) => {
  const handleChange = useCallback((e) => {
    setData([{ key: e.target.value }])
  }, [])

  return <input type="text" value={data.key} onChange={handleChange} />
}

export default function App() {
  const [data, setData] = useState([{ key: 'isShow' }])

  useEffect(() => {
    console.log('data', data)
  }, [data])

  return (
    <>
      {data?.map((item) => (
        <Item key={item.key} data={item} setData={setData} />
      ))}
    </>
  )
}

> codesandbox 에서 보기

원인 발견

data 배열을 순환할 때 컴포넌트에 key={item.key}을 전달해준 것이 문제였다.

input을 입력할 때마다 item.key 값이 수정되면서 Item이 리렌더링 되고 있었다.

컴포넌트에 전달하는 key 값은 고유 식별자여야 한다.

목록이 다시 렌더링될 때 React는 key를 사용하여 어떤 항목이 새 항목인지, 업데이트되었는지, 제거되었는지 확인한다.

따라서 key={item.key}를 고유한 값으로 전달하는 것으로 해결하였다.