React 토?론주제 - 리스트 렌더링과 key

리스트 렌더링이란?

const arr = [1, 2, 3];
const arrChange = arr.map((arr) => arr + 1);

console.log(arr, arrChange);

>> 2, 3, 4

 

: 배열에 들어있는 데이터 반복하면서 돌면서 화면에 그리는것 (반복문을 사용한 배열 처리 과정)

- .map()으로 배열 순회하며 ,,

 

 

key란?

: React가 어떤 항목을 변경, 추가, 또는 제거할지 식별하기 위해 사용하는 고유 식별자

리스트를 렌더링할 때 각 항목을 구분해서 화면을 효율적으로 업데이트(렌더링) 하기 위해,,

(key가 없다면 react 입장에서는 어떤게 새롭게 추가된 요소고 어떤게 기존에 존재하던 요소인지 효율적으로 알 수가 없)

((약간 이름을 붙여준다 싶은 느낌이군)

- 형제 요소 간의 항목을 고유하게 식별하기 위해 key가 필요

 

https://react.dev/learn/rendering-lists#where-to-get-your-key

Rendering Lists – React

 

---

 

💥 key를 배열의 index로 사용할 경우 문제 발생 가능 !! 

 

다음 경우는 배열의 index를 key 로 활용한 경우 

export default function App() {
  const [list,setList] = useState(['a','b','c','d']);
  return (
    <ul>{list.map((item,index) => <li key={index}>{item}</li>)}</ul>
  )
}

➡️ a, b, c, d

 

[ key를 배열의 index로 사용하는 경우 두 조건 만족해야함 ]

1. 리스트에 수정, 삭제, 삽입을 할 일이 없을 때

2. 리스트의 순서가 변하지 않을 때

>> 이유는 list가 변할 때 컴포넌트가 리렌더링 되면서 배열의 0번 째 index 에 새로운 요소가 추가 됐다면,

리액트는 기존의 key 가 0인 컴포넌트가 변하지 않았다고 생각한다네요

따라서 변경이 있을 거 같은 리스트인 경우 key를 배열의 index로 적어주는 건 매우 위험함!!

: 컴포넌트의 상태가 엉뚱한 곳에 보존되는 문제가 생길수 있음 

 

function App() {
  const [items, setItems] = useState(["a", "b", "c"]);
  const handleClick = () => {
    setItems(items.slice(1)); // 첫 번째 요소 제거
  };

  return (
    <div>
      <button onClick={handleClick}>삭제</button>
      {items.map((item, index) => (
        <Input key={index} />
      ))}
    </div>
  );
}

function Input() {
  const [value, setValue] = useState("");

  return (
    <input value={value} onChange={(e) => setValue(e.target.value)} />
  );
}

 

코드 문제점

- key로 index를 썻음 (key={index})

- 처음엔 a, b, c가 3개의 Input 컴포넌트로 표시됨

- 사용자가 각각 input에 a=A, b=B, c=C 입력했다고 해보면,

 

⬇️

 

- 버튼 클릭 시 a가 삭제되어 ["b", "c"]가 됨

- Input 컴포넌트는 index 기준으로 다시 생성됨

 

⬇️

 

- Input[0]이 기존 a였던 컴포넌트인데, 이제 b가 됐음

- 그런데 React는 index 0은 그대로니까, 상태도 그대로일 거라 착각

-그래서 A가 b의 값으로 보존돼버림 (즉, 값이 엉킴)!!

 

⬇️⬇️

 

리스트에서 항목을 삭제하거나 순서를 바꾸면(즉 항목들이 재배열되는경우),

key가 index이기 때문에 상태 꼬임(state mismatch) 발생가능성 너무 높아!!

 

따라서 고유한 key를 써야함

key={index} ❌ (순서 변경/삭제되면 버그 발생)

key={item.id} ⭕️ (고유성 + 안정성 확보)

 

---

 

c참고: 

 

https://velog.io/@ssoon-m/react-key-제대로-다루기

https://vanilla-car-log.tistory.com/9

 

https://dev-hpk.tistory.com/54