TIL 40. React (key)

📌 key

• 보통 반복되는 element list들을 React에서는 map을 사용하여 state의 값을 가지고 오는 것과 동시에 state의 정보를 element list에 넣어 반환할 수 있다.

• 하지만 JavaScript에서는 단순히 map을 사용 가능하지만, React에서는 반복되는 element list에 하나씩 고유의 key값을 가지고 있어야 한다.

🎈 key는 React가 어떤 항목을 변경, 추가 또는 삭제할 지 식별하는 것을 돕는다.

• React는 반복되는 element list를 효율적으로 관리할 수 있다.
• 예를 들어, 0, 1, 2, 4라는 id를 가진 element list가 있다고 가정해보자.
• 여기에 3이라는 id가 추가된다면, 0부터 4까지 다시 리렌더링되는 것이 아니라 id 2 이후의 element list부터 리렌더링되어 3, 4로 정렬되어 리렌더링되게 된다.

☝🏻 이러한 이점으로 컴퓨터가 처리하는 속도를 상향시킬 수 있다는 이점이 있다.
그렇기 때문에 map으로 element list를 반복적으로 랜더링하려 할때 자동적으로 순서에 따라 숫자값을 줄 수 있는 index를 사용하여 key값에 넣는 것은 본래의 목적을 제대로 활용하지 않는 방법이다.

    const list = commentLi.map((el, index) => (
      <li className="feed__comments__list" key={index}>
        <p className="feed__comments__contents">{el}</p>
        <div className="feed__comments__goodBtn">
          <img alt="good__button" src="/images/suyeonkim/dm.png" />
        </div>
        <div className="feed__comments__delBtn">
          <img alt="delete__button" src="/images/suyeonkim/comment.jpg" />
        </div>
      </li>
    ));

• 보이는 것처럼 최상단의 element에 key를 줬지만 index로 각 element마다 key를 주었기 때문에 key를 제대로 활용하지 못하는 코드이다.