Airbnb 스타일 가이드 들여다보기_1

Daniel Woo·2022년 1월 27일
0

key값 생성 이슈

다음은 Airbnb React/JSX Style Guide 문서 중 올바른 key값 적용에 관한 내용이다.

보다시피 우리가 흔히 임시로 list의 index값을 key값으로 대체하는 것은 나쁜 예시라고 되어 있다. 그 대신, 데이터에 미리 설정된 id값을 받아오는 것을 올바른 예시로 들었다.

그렇다면 왜 어떤 것은 key값에 어울리고 어떤 것은 그렇지 않을까?
그 이유에 대해 알아보기 위해 문서에서 'Index as a key is an anti-pattern' 라고된 링크를 따라가 보았다.

index를 key값으로 쓰면 안되는 이유

작성자가 말하기를 index를 key값으로 쓰는 이 방식은 key값을 지정하라는 오류를 잠시 멈출 수 있으나, 본질적인 문제가 해결되는 것은 아니라고 한다.
또한, 보기에는 심플한 방법이고 아무런 문제가 없어보이지만, 우리가 원하는 데이터가 예정된 list가 아닌 다른 list로 갈 수 있는 위험이 있다고 한다.

  • 흔히 겪는 문제

    이러한 문제는 작은 프로젝트에서는 발생하지 않을 수 있으나, 프로젝트가 커지면서 다음과 같은 문제로 드러날 것이다.

  • React는 index가 헷갈린다

    key prop은 React에서 DOM 요소를 구별하는 고유의 방식이다. React가 정확한 DOM을 선택하려면 그 DOM이 가지고 있는 고유한 key값이 필요한 것이다. index를 key값으로 지정하게 되면, 가져오는 배열 안에 요소를 추가하거나(push), 제거할 때(remove), 배열이 달라지기 때문에 index값은 새로 배정된다. 이때, React는 새로이 생성되는 index와 그 전에 알고 있던 index값을 헷갈려하는 것이다. 특히, 중간배열에 값을 추가하거나 제거할 때 말이다.

더 나은 방식의 key값 설정

그렇기 때문에 우리는 다음과 같은 방식으로 key값을 설정하는 것이 좋다. React가 적재적소에 데이터를 렌더링하지 못하는 것을 방지하기 위해서 말이다.

  • 멋진 방식

    첫 번째 해결 방식은 데이터의 id 값을 미리 설정하는 것이다. id의 값은 고유한 값이기 때문에 받아오는 배열이 바뀌더라도 React는 헷갈려하지 않을 것이다.
    대신, 이 방식은 미리 id값을 설정하는 과정이 필요하다. 아래와 같이 id값이 데이터를 받아올 때마다 증가하는 방식으로 설정하는 것이 일반적이다.
    이 방식대로라면 배열에서 새로운 데이터가 생성될 때 전체적으로 새롭게 id값이 생성되지 않는다. id값은 데이터가 추가될 때마다 계속해서 증가하는 값을 부여받기 때문이다.
    반대로 삭제하는 경우에는 해당하는 데이터의 고유한 값만이 배열에서 빠지게 된다.
    예를 들어, 다음과 같은 코드가 있다고 해보자.

const array = [a, b, c, d, e, f, g]

let memoCounter = 1;

const newMemo = (alphabet) => ({
id: memoCounter++  
 }
 array.map((memo) => (
  <li key={memo.id}>{memo}</li>
 ));
 
)
profile
모두가행복한세상을만들고싶은사람

0개의 댓글