✨ map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때

비슷한 html 여러개 필요하면 map( )안에 담으면 됩니다.

for반복문은 JSX 안에서 사용할 수 없어서 대신 map( )을 사용함

자바스크립트 map 함수 쓰는 법

기능1. array에 들어있는 자료갯수만큼 함수 안의 코드를 반복실행해줍니다.

기능2. 함수의 파라미터는 array안에 있던 자료임, 파라미터 두개 사용 가능 value, index

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

JSX 안에서 html을 반복생성하고 싶으면

리액트 중괄호안에서 html을 반복생성하고 싶으면 map을 이용해도 됨

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

이렇게 쓰면 [<div>안녕</div>, <div>안녕</div>, <div>안녕</div>]가 생성됨

리액트는 array안에 html담아놔도 잘 보여줌

예전에 만들었던 글제목 3개도 반복문으로 축약 가능할듯

function App (){
	let [글제목, 글제목변경] = useState(["남자 코트 추천", "강남 우동맛집", "파이썬독학"]);
  return (
    <div>
      (생략)
      { 
        글제목.map(function(v){
          return (
          <div className="list">
            <h4>{ v }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

(참고) 반복문으로 html 생성하면 key={html마다 다른 숫자} 추가해야함

map 반복문으로 반복생성한 html엔 key={ i } 속성을 추가해야합니다.

<div className="list" key={i}>

그래야 리액트가 div들을 각각 구분할 수 있어서

(참고) 일반 for 반복문을 쓰고싶다면

1. html들을 담아둘 array 자료를 하나 만들어줍니다.

2. 일반 for 반복문을 이용해서 반복문을 돌림

3. 반복될 때 마다 array자료에 div 하나씩 추가해줍니다.

4. 원하는 곳에서 {array자료} 사용하면 됩니다.

function App (){
  var 어레이 = [];
  for (var i = 0; i < 3; i++) {
    어레이.push(<div>안녕</div>)
  }
  return (
    <div>
      { 어레이 }
    </div>
  )
}

✨ 자식이 부모의 state 가져다쓰고 싶을 때는 props

자식 컴포넌트가 부모 컴포넌트에 있던 state 쓰고 싶으면 props로 전송해서 써야합니다.

props로 부모 → 자식 state 전송하는 법

1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름}>
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

props는 <Modal 이런거={이런거} 저런거={저런거}> 이렇게 무한히 전송이 가능합니다.

꼭 state만 전송할 수 있는 건 아닙니다.

<Modal 글제목={변수명}> 일반 변수, 함수 전송도 가능하고

<Modal 글제목=”강남우동맛집”> 일반 문자전송은 중괄호 없이 해도 됩니다.

자식 → 부모 방향 전송은 불가능합니다.

옆집 컴포넌트로의 전송도 불가능합니다.

props는 함수 파라미터 문법이랑 똑같습니다.

여러가지 색의 모달창이 필요하다면?

<Modal color={'skyblue'} />
<Modal color={'orange'} />

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

props.color 이런 식으로 구멍을 뚫어놓으면 이제 컴포넌트 사용할 때

<Modal color={'skyblue'} /> 이러면 하늘색 모달창이 생성됩니다.

<Modal color={'orange'} /> 이러면 오렌지색 모달창이 생성됩니다.

그래서 비슷한 컴포넌트를 또 만들 필요가 없어지는 것입니다.