🔑 key props!!

React를 사용하면서 편리하게 느껴졌던 부분은 기존에는 하드코딩을 통해서 복사 붙여넣기를 했던 코드들을 데이터만 있다면 map() 메소드를 이용해서 쉽게 만들 수 있다는 점이었다. 하지만, 처음 map() 메소드를 사용할 때 형제 요소들 사이에 유일한 키값을 부여핸다는 경고창이 뜨는 것을 보게 된다.

"아니... 편리하고 좋은데... key를 왜 굳이 부여해야하는거야?" 라는 의문이 드는데 이에 대해서 정리해보자.

what key?

React에서는 props을 통해서 key 값을 부여할 수 있다. 주로 배열로 이루어진 데이터들을 map() 메소드를 이용해서 만들 때 사용하는 것을 볼 수 있다. 만약 key 값을 부여하지 않으면 아래의 오류가 뜬다.

Each child in an array should have a unique “key” prop.

그렇다면 key 값이 필요한 이유는 무엇일까? 이는 특정 요소의 변화(추가, 삭제 등)을 알기 위해서 필요한 값이다. 리액트의 경우 state에 변화가 있는 경우에 render() 함수가 계속 호출되는데 이 경우에 가상 DOM 을 이용해서 변화가 있는 요소만을 반영시키기 때문에 매우 중요하다.

주의할 점!!!

그렇다면, key 값에는 어떤 값들을 넣어줄 수 있을까. 보통 배열의 경우에 인덱스를 자동으로 부여해주면 괜찮다는 생각을 할 수 있다. 하지만 이는 보통의 경우에 좋지 못한 생각이다.

인덱스를 이용하는 것은 중복된 값이 들어갈 일은 없어서 편리할 수 있지만 만약 아래와 같은 상황에 문제가 생길 수 있다.

key : 0 {userName: "dream", age:24}
key : 1 {userName: "sodis", age:20}
key : 2 {userName: "worms", age:14}

위와 같은 요소들을 map() 으로 돌리면서 인덱스를 키 값으로 줬다고 생각해보자. 그런데 만약 배열의 맨 앞에 setState()를 통해서 {userName: "jezz", age:33} 이라는 값이 들어온다고 생각해보자. 그렇게 된다면 인덱스를 아이디로 주고 있기 때문에 각 값들의 인덱스가 변경되면서 아이디로 변경되는 참사가 일어나게 될 것이다. 그렇기 때문에 결국 배열의 전체 아이템의 렌더링이 다시 일어나게 되고 이는 낭비가 될 것이다.

물론, 인덱스를 사용할 수 있는 경우도 있다. 정적인 데이터로서 배열의 구성이 바뀔 일이 없는 경우, 정렬이나 필터 요소가 필요 없는 경우 등이다.

그래서 key 값은?

key 는 서로 겹치지 않을 값이라면 어떤 값을 사용해도 좋다. 특히 새로 생성되는 요소라면 Date.now() 등도 하나의 방법이 될 것이다. 추가로 key 값의 중복은 같은 형제 요소의 경우에만 해당하기 때문에 부모 요소와의 관계성을 고려할 필요가 없다.

현재 정적인 데이터가 언제나 정적이라고 확신하기는 어렵다. 그렇기 때문에 최대한 인덱스의 사용을 지양하면서 유지보수에 좋은 방향으로 고민해보면 좋을 것 같다.

📕 참조

https://ko.reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapper
https://www.youtube.com/watch?v=ghxHAy3LH28
https://ko.reactjs.org/docs/reconciliation.html#recursing-on-children
https://velog.io/@rhfovk/TIL-19React%EC%97%90%EC%84%9C-key%EC%9D%98-%EC%97%AD%ED%95%A0