[error] key값을 넣어주지 않아 생기는 오류

Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

 

list에서 각각 고유의 값을 정해주지 않아서 생기는 오류이다.

<ul>
  {listItems.map((item, idx) => {
    return <li key={idx}>{item}</li>;
  })}
</ul>

이런식으로 key 값을 정해주면 되는데, 그 키값을 인덱스로 잡아주는 건 정말 안 좋다고.

만약에 리스트를 또 추가하게 된다면, 인덱스가 전부 바뀌어 모든 키값이 한번씩 바뀌는 현상이 나타난다.

그렇게 되면 몇개, 몇십개 일땐??? 진짜 어마어마한 일이 일어나겠지? ㅠ ㅠ

그래서 공식문서에서도 그냥 마지막 수단으로 사용하라고 하고 비권장하고 있다고 한당

 

 

내가 쓴 코드는 map을 이용해서, 

어떤 조건 하에 ** 를 선택했을땐 1번 div가 , &&를 선택했을 땐 2번 div가 나타나는 형식인데

각각 div에 처음에 key값을 줘봤는데도 딱히 변화는 없었다.

근데 생각해보니 조건문은 조건문일 뿐이기에 가장 상단에 줬더니 에러가 더는 나지 않았음

{settingData.map((el: any, idx: number) => {
    return (
        <div key={el.setName}> // 이 부분
            {el.setName === "A" ? (
                <Flex borderBottom={"1px solid #ddd"} p={"20px"} alignItems={"center"}>
                    <Text mr={"140px"} fontSize={"18px"} ml={"20px"}>
                        {el.setName}
                    </Text>
                    <Select>
                        <option value="어쩌구"> ' 1 ' </option>
                        <option value="저쩌구"> ' 2 ' </option>
                    </Select>
                </Flex>
            ) : el.setName === "B" ? (
                <Flex borderBottom={"1px solid #ddd"} p={"20px"} alignItems={"center"}>
                    ...
                </Flex>

            ) : (
                <Flex borderBottom={"1px solid #ddd"} p={"20px"} alignItems={"center"}>
                    ...						
                </Flex>
            )}
        </div>
       );
})}

el.setName은 서버에서 내려준 각자의 고유값이기 때문에 key값으로 적절했다

사실 el.id 나~ seq나 어떤 값이든 상관없긴함ㅋㅋㅋ

 

결론: key값을 꼭 주자...