[(과제) [React] State, Props, Event] - 5

장운서·2021년 7월 1일

Event Map Props React State key

react

목록 보기

6/9

Mission 5) map 함수 적용시 key props를 부여하는 이유

위 공식문서를 참고하여 map 함수 적용시 key props를 부여하는 이유에 대해 블로그를 작성해주세요.
본인이 작성한 map 함수 사용 코드를 예시로 활용하여 설명해주세요.

미션 4 등 컴포넌트를 활용하여 map 함수를 실행할 경우 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시가됩니다.

key

key는 엘리먼트 리스트를 만들때 포함해야 하는 특수한 문자열 어트리뷰라고 합니다.
key는 react가 어떤 항목을 변경,추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

<li key = {index}>내용 </ㅣㅑ>

이러한 형태로 사용됩니다. 특히 map을 이용할 경우 반드시 필요합니다.
하지만 주의사항이 있습니다. 주의사항은 마지막에 다뤄보겠습니다.

컴포넌트 사용시 map 함수에서 key 사용법

앞서 말한대로 key는 배열 내부의 엘리먼트에 지정해야 합니다.
자식 컴포넌트는 재사용 하기 위해서 사용되는데 이때 자식 컴포넌트에서 key를 사용하면 안됩니다.

잘못된 사용의 예


function 자식 컴포넌트 (props) {
  const value = props.value;
  return (
    <li key={value.toString()}>
      {value}
    </li>
  );
}

자식 컴포넌트 내부에서 사용하면 안됩니다.
부모의 값에서 자식 컴포넌트를 사용할때 사용해야 합니다.

옳은 예

function 부모 컨포넌트(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <자식 컨포넌트 key = {number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

또한 key는 두개의 다른 배열을 만들때 동일한 key를 사용할수 있습니다.


function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}> //같은 키 
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}> //같은 키 
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

주의할점

리액트는 state에서 변경사항이 있는 부분만 캐치해서 리랜더링 해준다.
배열에 어떤 요소를 추가하면 리액트는 배열전첼를 리랜더링 할까 하나만 리랜더링 할까?

배열의 key값을 고유하게 넘겨주었을 경우 리액트는 딱 한가지 요소만 리랜더링 한다.

리액트는 기존에 키값과 새로 추가된 키값을 비교하여 변화된 값을 새로추가하고 랜더링 시켜준다.

예시로 세가지 값이 있다고 생각해 본다. 우리는 state를 사용하니 state를 사용하여 예시를 해보겠다.
state값을 객체를 가지고 있는 배열이라고 생각해보자.

[
{id:0, content:'hello'}
{id:1, content:'hello'}
{id:2, content:'hello'}
]

여기에서 {id:4, content:'hello4'}를 추가해보자
그러면 리액트는 이전값과 현재값을 비교한다. 그러면 key값이 id일때 내용은 같으니 추가하지 않고 id:4값을 추가한다. 이것만 랜더링 시켜준다.

map을 사용하였을 때 index로 키값을 주면 안되는 이유

위의 상황을 고려했을 경우 우리는 map함수를 사용할때 index를 키값으로 주면 안된다는 것을 알수 있다.
key값을 index로 주게된다면 key값을 id로 주었을 경우와 다르게 맨앞에 값이 들어오게 되었을 경우

key: 0,  {id:4,  content:'ya!'},
key: 1,  {id:0,  content:'moya'},
key: 2,  {id:1,  content:'holly'},
key: 3,  {id:2,  content:'monya'},
key: 4,  {id:3, content:'hulkhulk'}

리액트가 판단했을때 매칭이 싹다 바뀐것으로 인지해버리게 된다.
결과적으로 비효율적으로 일처리가 진행되고 리액트의 장점을 사용하지 못하게 된다.

결과적으로 state로 배열을 관리한다면 map을 사용할때 key로 index를 사용하지말자.
배열의 처음이나 중간에 새로운 데이터가 들어올 경우 그부분만을 캐치하지 못하게 된다.
사용하고 싶으면 데이터가 절때 바뀌지 않을 때 권장된다.