React key prop

태현·2021년 5월 11일
0
post-thumbnail

key의 역할

  • 리액트에서 반복되는 리스트를 만들 때 map()함수를 사용하는데, 이때 만들어지는 리스트에는 key 값이 필요하다.

    > key는 react가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
    
    - 리액트 공식문서에는 컴포넌트 단위를 랜더링하는 리액트의 특성상 필요한 부분만 선택적으로 랜더링 하기위해 리액트 내부적으로 key 값이 필요하다고 해석했다.
    
    # key를 이용하는 방법
    
    - 프로퍼티 이름으로 전달하면 된다.
    - 그런데, 이 때부터 id와 혼동이 된다
    
    # key에 id를 써야하는가 뭘 도대체 써야하는가?
    
    - 답은 없다. key값은 개발자들이 쓰는 것이 아니라, react가 필요한 것이고, 그것을 우리는 고유한 값으로 지정만 해주면 된다.
    - 이는 리액트가 필요한 부분만 DOM에 넣어서 랜더링 할 수 있도록 함에 있다.
    - 이는 성능상 비효율적인 부분을 줄인다.
    
    # key 값은 고유한 값으로 줄 수 있는 방법은?
    
    ## index활용
    
    - map()의 두번째 인자로 인덱스를 받아 키값으로 사용하는 경우가 있다.
    - 댓글 기능처럼 리스트를 삭제 한다는 것 까지 고려한다면 **index 활용은 부적절**하다.
    
    ## 문자열 사용
    
    - map인자 .toString()과 같이 고유한 문자열로 키값을 정해주는 방법도 있다.
    - 그러나, 인자가 객체나 배열 형태면 안 좋다.
    
    ## ID값 사용
    
    - 대부분의 경우 데이터의 ID값을 사용한다.
    - 많은 이들이 객체(인자)에서 .id 로 추출하여 사용한다.
    
    ## key는 형제 사이에서만 고유한 값이어야 한다.
    
    - 위 3가지 중 하나를 이용하여 고유한 값을 key에 할당해줘야 하지만, 만약 map()을 여러번 써서 같은 모양이나 비슷한 모양의 리스트들이 있다면, 모든 리스트가 각각 고유한 키 값을 가질 필요는 없다.
    - 하나의 map()으로 만들어진 형제같은 리스트들만 key의 고유성을 가지면 된다.
profile
안녕하세요, 지식을 공유하는 공간입니다.

0개의 댓글