Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- expo
- aws ec2
- react
- 김골라
- CSS
- nodejs
- 어셈블리어
- netlify variables
- GeoJSON object too complex/large
- 반응형 페이지 좌표 변환
- 이미지 좌표 추출
- NODE_VERSION
- credential error
- AWS CodeBuild
- rwdImageMaps
- 설치완료안됨
- C언어
- 이미지 맵
- AWS CodePipeline
- Error:error:0308010C:digital envelope routines::unsupported
- ERR_PNPM_NO_GLOBAL_BIN_DIR
- Unable to find the global bin directory
- S3
- Sequelize Error: Dialect needs to be explicitly supplied as of v4.0.0
- EC2
- can't getting credentials
- ogr2ogr
- node
- SASS
- AWS
Archives
- Today
- Total
ImFe's study
[React] Warning: Each child in a list should have a unique "key" prop. 해결 본문
WEB/React
[React] Warning: Each child in a list should have a unique "key" prop. 해결
ImFe 2022. 6. 8. 19:05리액트에서 JSX로 배열을 통해 UI를 그려준다면 요소에 key속성(prop)을 넣어주어야한다.
리액트는 key속성을 이용하여 컴포넌트와 돔 요소간의 관계를 생성하는데, 라이브러리는 이러한 관계를 통해 컴포넌트가 재렌더링되어야하는지 판단한다.
배열이 static하지 않은 이상 배열의 인덱스값을 key속성으로 지정하는것은 권장되지 않는다. 리액트가 재렌더링 할 요소를 판단함에 있어 혼란이 생길 수 있기 때문.
키는 유니크할 필요는 없다. 형제 요소들 사이에서만 유니크하면 된다.
글의 제목이 입력되어있는 title배열을 받아와 map으로 뿌려주는 목적을 가진 JSX코드이다
{
// map()의 두번째 인자는 반복문이 돌 때마다 0부터 1씩 증가함
title.map(function(title, i) {
return (
<div className="list" key={i}>
<h4 >{ title } <span onClick={() => { addThumbsUp(thumbsUpCount+1) }}>
👍</span> {thumbsUpCount} </h4>
<p>2월 17일 발행</p>
</div>
);
})
}
'WEB > React' 카테고리의 다른 글
[REACT] React에서 type="range"인 input의 요소가 드래그되지 않음 (0) | 2022.10.20 |
---|---|
[React] react-redux가 필요한 이유, connect&provider, mapStateToProps, mapDispatchToProps (0) | 2021.06.30 |
[React] Redux 도입 (0) | 2021.06.29 |
[Sass] Sass를 이용한 버튼 컴포넌트 스타일링 (0) | 2021.06.29 |
[Sass] Node Sass version 6.0.1 is incompatible with ^4.0.0|| ^5.0.0. 해결 (0) | 2021.06.28 |
Comments