일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 티스토리챌린지
- 수학
- 자료 구조
- 엔트리포인트
- 브루트포스
- 코딩일기
- 세그먼트 트리
- styled-components
- 토이 프로젝트
- 백준
- js
- 구현
- react-three/fiber
- 시뮬레이션
- Next.js
- 프론트엔드
- three.js
- 회고
- poiemaweb
- JavaScript
- HTML5
- 개발 회고
- 자바스크립트
- State
- 해시를 사용한 집합과 맵
- 오블완
- REACT
- 모던 자바스크립트 튜토리얼
- 기본 문법
- 자바
Archives
- Today
- Total
코딩하는 고릴라
[React] 반복되는 div 축약하기(map) 본문
map 함수를 사용해 줄이기
- 아래 코드를 살펴보면, className이 "list"인 <div>가 여러번 반복됨을 확인할 수 있다.
- 위와 같은 코드의 반복을 줄이기 위해 게시글의 제목이 담긴 state인 title와 map함수를 사용할 수 있다.
- Line 2 : title state의 각 요소들(Title1, Title2, Title3)을 element라는 이름으로 받아온다.
- Line 5 : 기존에 title[0], title[1], title[2]로 하드코딩된 부분을 {element}로 바꿔 title에 담겨져 있던 요소들을 꺼내 해당 위치에 넣어 사용할 수 있다.
반응형
'React' 카테고리의 다른 글
[React] Input으로 state 변경 (0) | 2023.11.07 |
---|---|
[React] 하위 컴포넌트에 props 전달 (0) | 2023.11.07 |
[React] Component (0) | 2023.11.07 |
[React] state 변경 함수 동작 원리, Array 값 변경 (0) | 2023.11.06 |
[React] state, onClick (1) | 2023.11.06 |