코딩애플 'React' / 2

 

 

 

 

 

 

 

map은

1. array의 자료 갯수만큼 함수를 실행시켜주고

2. 함수의 파라미터는 array안에 있던 자료이고

3. return에 뭐 적으면 array로 담아줌

 

 

중괄호 { } 안에서는 for문 쓸수없음

 

 

[1,2,3].map(function(){
	return <div>안녕</div>
})

// 출력값은 안녕이 3번 나옴

 

 

 

글제목.map(function(a,i){
	return(
    	<div className="list">
        	<h4>{글제목[1]}</h4>
            <p>2월17일발행</p>
    )
})

// 여기서 a는 array 안에 있던 자료들
// i는 반복문이 돌때마다 0부터 1씩 증가하는 두번째 인자

 

 

 

 

 

 

 

 

 

props 전송은 부모 👉 자식만 가능하다 (옆집한테 보내는것도 불가능 무조건 부모에서 자식만 가능)

 

 

 

{
	// 프롭스 전송 문법
	modal == true ? <Modal color={'red'} 글제목={글제목}/> : null
}

{
	function Modal(props){
    	return(
        	<div className="modal" style={{background : props.color}}>
            	<h4>{props.글제목[0]}</h4>
            </div>
        )
    }
}

 

 

 

 

<props를 응용한 상세페이지 만들기부터 듣기>