[React] key

📍 key
리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.

예를 들어 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있는데 key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다.

하지만 key가 있다면?

이 값을 사용해 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다.

---

key 설정

👉 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯 설정하면 됨.

✔ key 값은 언제나 유일해야 함.
따라서 데이터가 가진 고윳값을 key 값으로 설정해야 한다.

• 예제 컴포넌트 수정

// IterationSample.jsx
const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const namesList = names.map((name, index) => <li key={index}>{name}</li>);
  return <ul>{namesList}</ul>;
};
 
export default IterationSample;

이제 개발자 도구에서 더 이상 경고 메시지를 표시하지 않을 것!

고유한 값이 없을 때만 index 값을 key로 사용해야 한다. index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못한다.

(+) 응용하기

• IterationSample 컴포넌트에서 useState를 사용해 상태를 설정.

  • 세 가지 상태를 사용
    • 데이터 배열
    • 텍스트를 입력할 수 있는 input의 상태
    • 데이터 배열에서 새로운 항목을 추가할 때 사용할 고유 id를 위한 상태

배열을 설정할 때, 조금 전에는 단순히 문자열로 이루어진 배열을 만들었음.

이번에는 객체 형태로 이루어진 배열을 만들어보자! 그리고 해당 객체에는 문자열과 고유 id 값이 있음.

// IterationSample.jsx
// 6.4.1 응용하기
import React, { useState } from 'react';
const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: '눈사람' },
    { id: 2, text: '얼음' },
    { id: 3, text: '눈' },
    { id: 4, text: '바람' },
  ]);
  const [inputText, setInputText] = useState('');
  const [nextId, setNextId] = useState(5); // 새로운 항목을 추가할 때 사용할 id

  const namesList = names.map((name) => <li key={name.id}>{name.text}</li>);
  return <ul>{namesList}</ul>;
};

export default IterationSample;

(+) 조금 더 응용해서 '추가' 버튼 만들어보기

// 6.4.2 데이터 추가 기능 구현하기
import React, { useState } from 'react';
const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: '눈사람' },
    { id: 2, text: '얼음' },
    { id: 3, text: '눈' },
    { id: 4, text: '바람' },
  ]);
  const [inputText, setInputText] = useState('');
  const [nextId, setNextId] = useState(5);

  const onChange = (e) => setInputText(e.trarget.value);

  const nameList = names.map((name) => <li key={name.id}>{name.text}</li>);
  return (
    <>
      <input type={inputText} onChange={onChange} />
      <button>추가</button>
      <ul>{nameList}</ul>
    </>
  );
};
export default IterationSample;

그다음에는 버튼을 클릭했을 때 호출할 onClick 함수를 선언해서 버튼의 onClick 이벤트로 설정해보자.

onClick 함수에서는 배열의 내장 함수 concat을 사용해 새로운 항목을 추가한 배열을 만들고, setNames를 통해 상태를 업데이트해 준다.

// 6.4.2 데이터 추가 기능 구현하기
// 6.4.2 데이터 추가 기능 구현하기
import React, { useState } from 'react';

const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: '눈사람' },
    { id: 2, text: '얼음' },
    { id: 3, text: '눈' },
    { id: 4, text: '바람' },
  ]);
  const [inputText, setInputText] = useState('');
  const [nextId, setNextId] = useState(5); // 새로운 항목을 추가할 때 사용할 id

  const onChange = (e) => setInputText(e.target.value);
  const onClick = () => {
    const nextNames = names.concat({
      id: nextId, // nextId 값을 id로 설정
      text: inputText,
    });
    setNextId(nextId + 1); // nextId 값에 1을 더 함.
    setNames(nextNames); // names 값을 업데이트
    setInputText(''); // inputText를 비움.
  };

  const namesList = names.map((name) => <li key={name.id}>{name.text}</li>);
  return (
    <>
      <input value={inputText} onChange={onChange} />
      <button onClick={onClick}>추가</button>
      <ul>{namesList}</ul>
    </>
  );
};

export default IterationSample;

• 배열에 새 항목을 추가할 때 배열의 push 함수 대신 concat 사용!
  👉 push 함수는 기존 배열 자체를 변경해 줌
  👉 concat은 새로운 배열을 만들어 준다는 차이점이 있음.

리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 한다. 이를 불변성 유지라고 하는데, 그래야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있기 때문이다.

(+) 더블 클릭하면 삭제되는 것도 추가해보자...

  // 기존 추가 기능 구현 주석 처리하고...
  // const namesList = names.map((name) => <li key={name.id}>{name.text}</li>);
  //
  // 추가 + 삭제 기능 구현
  const onRemove = id => {
    const nextNames = names.filter(name => name.id !== id);
    setNames(nextNames);
  };
  const namesList = names.map(name => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
  ));