1. 리액트 환경에서의 반복
- HTML을 반복문으로 반복 가능
- 리액트 환경에서 for문 이용 BUT, JSX {} 중괄호 내에 for 넣지 못함 ⇒ map 함수 이용!!
2. map 함수 : map()
- 사용
- array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용
- 유사 반복문 - 형태
- { 반복할 데이터.map() }
- { 반복할 데이터.map(()=>{return<HTML>})}
⇒ { 반복시킬 데이터 갯수.map(return 반복시킬 HTML} } - 함수 안 파라미터 ex) a, 글
- array안에 있던 각각의 데이터
var 어레이 = [2,3,4];
var 뉴어레이 = 어레이.map(function(a){ // a가 배열안에 있던 각각의 데이터
return a*2; // [4,6,8]
})let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '치킨 맛집 추천']);
function App (){
return (
<div>
HTML 잔뜩있는 곳
...
{ 글제목.map(function(글){
return (
<div className="list">
<h3>{ 글 }</h3>
<p>2월 18일 발행</p>
<hr />
</div>
}) }
</div>
)
}- onClick 같은 이벤트도 포함되서 반복 가능
function App (){
return (
<div>
HTML 잔뜩있는 곳
...
{ 글제목.map(function(글){
return (
<div className="list">
<h3>{ 글 } <span onClick={ ()=>{ 따봉변경(따봉+1) }}>👍</span> {따봉}</h3>
<p>2월 18일 발행</p>
<hr />
</div>
}) }
</div>
)
}3. for 반복문
- 사용 방법
1) 일반 함수 만들고, 함수안에 HTML담을 array 자료 생성
2) for 반복문 이용해 array내에 HTML 추가
3) 완성된 array를 return
4) 함수를 원하는 곳에 { 함수명() } 데이터 바인딩 - for in / for of도 동일함
function App (){
function 반복된UI(){
var 어레이 = [];
for (var i = 0; i < 3; i++) {
어레이.push(<div>안녕</div>)
}
return 어레이
}
return (
<div>
HTML 잔뜩있는 곳
{ 반복된UI() }
</div>
)
}
# 결과 #
안녕
안녕
안녕[ 참고 ]
https://online.codingapple.com/course/react-basic/
React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌
누구나 마음 한켠엔 나만의 웹서비스를 만들고 싶어합니다. 프론트엔드는 어찌저찌 하겠는데 서버 만드는게 어렵고 귀찮다고요? 그렇다면 Firebase를 쓰십시오. 구글이 웹서버를 대신 만들어
online.codingapple.com
'React > 개념' 카테고리의 다른 글
| [React] CH10. props을 응용한 상세페이지 만들기 (0) | 2021.09.11 |
|---|---|
| [React] CH09. props (0) | 2021.09.10 |
| [React] CH07. 클릭하면 동작하는 UI(모달창) 만드는 법 (0) | 2021.09.09 |
| [React] CH06. Component : 많은 div들을 한 단어로 줄이는 방법 (0) | 2021.09.09 |
| [React] CH05. Array, Object state 데이터 수정 방법 (0) | 2021.09.09 |
댓글