[React] CH08. 리액트 환경에서의 반복: map(), for

React/개념

[React] CH08. 리액트 환경에서의 반복: map(), for

MINNI_ 2021. 9. 10. 03:28

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