[react]data unique key setting

[data unique key setting]
: 데이터 map 구조중 key 값이 unique 설정이 안되어있어 에러가 난 상태

<HeaderLayer>
          <ModelName>{productGrpNm}</ModelName>
          {color && (
            <ColorList>
              {color.map(c => (
                <Color color={c.hex} title={c.name} />
              ))}
              {phoneCapacity &&
                phoneCapacity.map(capacity => <Capacity>{capacity}</Capacity>)}
            </ColorList>
          )}
</HeaderLayer>

 

 

1. hex 코드 처리

: 리액트에서는 시퀀스 값 처리(유니크한 key를 설정할때)를 hex로 처리하는 방법을 권장하는거 같다.

<HeaderLayer>
          <ModelName>{productGrpNm}</ModelName>
          {color && (
            <ColorList>
              {color.map(c => (
                <Color key={c.hex} color={c.hex} title={c.name} />
              ))}
              {phoneCapacity &&
                phoneCapacity.map(capacity => (
                  <Capacity key={capacity}>{capacity}</Capacity>
                ))}
            </ColorList>
          )}
</HeaderLayer>

 

2. index 처리
: index방법은 리액트에서 선호하는 방법이 아니라 warring이 뜰 수 있다 해서 hex값에구분자를 주어서 index 처리를한다.

: index처리를 하게 되면 개발자입장에서 데이터 리딩이 용이하기때문에 사용

<HeaderLayer>
          <ModelName>{productGrpNm}</ModelName>
          {color && (
            <ColorList>
              {color.map((c, index) => {
                const idx = `${c.hex}_${index}`;
                return <Color key={idx} color={c.hex} title={c.name} />;
              })}
              {phoneCapacity &&
                phoneCapacity.map(capacity => (
                  <Capacity key={capacity}>{capacity}</Capacity>
                ))}
            </ColorList>
          )}
</HeaderLayer>

 

 

 

cf) 공부하기

ko.reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapper"

리스트와 Key – React