Key와 id의 차이점 / 리액트에서 반복되는 리스트를 만들땐 둘 중 어떤것을 써야할까?

결론부터 말하자면, key를 사용합니다. 아래쪽에 key의 역할과 사용방법을 적어두었습니다.

 

 

 

내부 프로젝트 진행중, 이번에 제가 맡은 부분은 공지사항목록과 공지사항 상세 페이지 입니다.

공지사항 목록에서 게시글 클릭시, 해당 게시글 상세페이지로 이동을 시켜야하는 상황입니다.

key값을 줄지 id값으로 매칭 시킬지 순간 고민하다가 그동안 리액트를 공부하면서 'key와 id를 사용하면서도 제대로 구분 하지 못했구나' 느꼈습니다.  key와 id의 역할이 비슷해 보이는데 어떤 차이점이 있을까요? 저는 제대로 쓰기위해 알아보기로 했습니다.

 

 

용도

key : 동적인 리스트에서 각 요소를 고유하게 식별하여 변경을 최소화하는 데 사용됩니다.

id : HTML에서 요소를 식별하는 데 사용되는 고유한 식별자이며, React에서도 요소를 식별하는 데 사용될 수 있습니다.

 

 

중복 가능 여부

key : 동적인 리스트에서 각 요소는 고유한 ‘key’값을 가져야 하므로 중복될 수 없습니다.

id : HTML에서는 요소의 **id**값은 고유해야 하지만, React에서는 컴포넌트를 식별하는 데 사용될 수 있으므로 중복될 수 있습니다.

 

속성 이름

key : React에서만 사용되는 속성으로, 일반적으로 **map()**메서드와 함께 사용됩니다.

id :  HTML에서 사용되는 속성으로, React에서도 사용될 수 있지만, **key**보다는 요소를 식별하는 데 있어서는 덜 일반적으로 사용됩니다. 따라서, React에서 동적인 리스트를 렌더링할 때 각 요소는 고유한 **key**값을 가져야 하며, 각 요소를 추가, 제거, 변경하는 경우 변경 사항을 최소화할 수 있습니다. **id**는 React에서 요소를 식별하는 데 사용될 수 있지만, 보다 일반적인 HTML 속성이므로, React에서는 **key**를 주로 사용합니다.

 

 

허걱,, 리액트네이티브로 개발중인데 key를 써야할 것 같습니다. 그래서 key를 좀 더 알아봐야겠습니다.

 

 

key가 뭔데!

리액트에서 key는 엘리먼트의 고유 식별자로 사용됩니다. 각 엘리먼트는 컴포넌트의 props를 통해 전달되며, key는 이러한 엘리먼트를 유일하게 식별하는 데 사용됩니다.

 

리액트에서 컴포넌트가 업데이트될 때, 기존 엘리먼트의 순서가 변경되거나 새로운 엘리먼트가 추가되거나 제거될 수 있습니다. 이 때 key는 리액트가 어떤 엘리먼트를 변경, 추가 또는 제거해야 하는지 판단하는 데 사용됩니다.

 

만약 key를 지정하지 않으면 리액트는 기본적으로 배열의 인덱스를 사용하여 각 엘리먼트를 식별합니다. 그러나 배열에서 엘리먼트가 추가, 삭제 또는 이동되면 인덱스가 변경될 수 있으므로 리액트가 예기치 않은 결과를 출력할 수 있습니다. 따라서 key를 사용하여 엘리먼트를 고유하게 식별함으로써 이러한 문제를 방지할 수 있습니다.

 

 

key 사용예시

예를 들어 동적으로 생성된 리스트 컴포넌트를 렌더링할 때, 각 리스트 아이템을 식별하는 데 key를 사용할 수 있습니다.

function MyListComponent(props) {
  const items = props.items;
  const listItems = items.map((item) =>
    <li key={item.id}>
      {item.name}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

위 코드에서는 items 배열의 각 요소마다 id 값을 key로 사용하여 리스트 아이템을 식별합니다. 이렇게 key를 지정하면, items 배열의 순서가 변경되거나 새로운 아이템이 추가되거나 삭제될 때, 리액트가 변경된 아이템만 업데이트하고 나머지 아이템은 그대로 유지할 수 있습니다.

 

반면에, key를 지정하지 않았을 경우, 리액트는 기본적으로 배열의 인덱스를 key로 사용합니다. 만약 items 배열의 순서가 변경되거나 새로운 아이템이 추가되거나 삭제될 경우, 리액트는 모든 아이템을 다시 렌더링하게 되어 성능 저하를 유발할 수 있습니다.

 

따라서, key는 리스트 컴포넌트를 구현하는 데 있어서 매우 중요한 역할을 합니다.

 

 

그럼 고유한 key값을 지정 해 주는 방법은?

고유한 key 값을 지정하는 방법은 각 엘리먼트마다 고유한 식별자를 가지고 있는 경우, 그 값을 key로 사용하는 것입니다. 일반적으로 데이터베이스의 id나 UUID 등을 사용하며, 데이터 소스에 따라 다를 수 있습니다.

 

예를 들어, 다음과 같은 데이터를 가진 배열을 가지고 있다고 가정해봅시다.

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
];

위 데이터를 렌더링하는 컴포넌트에서 key를 지정할 때, 각 사용자의 id 값을 key로 사용할 수 있습니다.

function UserList(props) {
  const users = props.users;
  const userList = users.map((user) =>
    <li key={user.id}>{user.name}</li>
  );
  return (
    <ul>{userList}</ul>
  );
}

위 코드에서는 users 배열의 각 요소마다 id 값을 key로 사용하여 리스트 아이템을 식별합니다. 이렇게 key를 지정하면, 리스트 아이템이 추가, 제거, 변경될 때 리액트가 변경된 아이템만 업데이트할 수 있습니다.

 

 

key={user.id}와 id={user.id}는 어떻게 다를까?

저는 사실 이부분이 늘 헷갈렸습니다.  key={user.id}와 id={user.id}는 어떻게 다를까요? key prop은 리액트에서 컴포넌트 배열을 렌더링할 때 각 엘리먼트를 고유하게 식별하는 데 사용됩니다. 이 값은 리액트에서만 사용되며, 렌더링 결과물에는 영향을 주지 않습니다.

 

반면에 id prop은 HTML에서 DOM 엘리먼트를 식별하는 데 사용됩니다. 이 값은 웹 브라우저에서 DOM 요소를 조작하거나 검색하는 데 사용될 수 있습니다. 

 

id prop은 웹 브라우저에서 유일해야 하며, 리액트에서만 사용하는 것이 아니라 HTML에서도 사용됩니다. 예를 들어, 다음과 같은 코드가 있다고 가정해봅시다.

function User(props) {
  return (
    <div id={props.id}>
      {props.name}
    </div>
  );
}

위 코드에서 id prop은 HTML에서 DOM 엘리먼트를 식별하는 데 사용됩니다. id prop의 값은 유일해야 하며, 리액트에서는 key prop을 사용하여 컴포넌트 배열을 렌더링할 때 각 엘리먼트를 고유하게 식별합니다. 따라서 id prop과 key prop은 서로 다른 역할을 하며, 혼동하지 않도록 주의해야 합니다.

 

 

id와 key값을  잘 몰랐던 저는

function UserList(props) {
  const users = props.users;
  const userList = users.map((user) =>
    <li key={user.id} id={user.id}>{user.name}</li>
  );
  return (
    <ul>{userList}</ul>
  );
}

 이렇게 key와 id를 동시에 주기도 했었습니다. 하지만 key prop과 id prop은 서로 다른 용도를 가지고 있기 때문에, 두 개를 동시에 사용하는 것은 좋지 않다는것을 알게 되었습니다. 

 

id prop을 사용하여 DOM 엘리먼트를 식별하면서 key prop을 사용하여 리액트에서 엘리먼트를 고유하게 식별하는 것은 혼란을 일으키며 또한, key prop은 리액트에서만 사용되므로, 불필요한 코드를 추가하는 것입니다.

 

 

 

결론은

리액트에서 컴포넌트 배열을 랜더링해야할 때는 id prop이 아닌 key prop을 씁시다.