[Blog-project] 반복문

🚀 React에서 반복문 사용하기

1) return문 내에서는 for문을 쓸 수 없다 ➡ map을 사용하여 반복문 기능 구현 가능
2) return문 밖에서 for문을 활용한 함수 사용 후, 해당 함수를 return문 내에 가져올 수 있다.

🍎 props 사용방법
1) <자식컴포넌트 전송할이름={state이름}> 이렇게 사용한 후
2) 자식컴포넌트 선언하는 function 안에 파라미터(props)를 하나 만들어주기.
3) 자식컴포넌트 함수 내에서 state값을 받와아야 하는 데이터 안에 {props.state이름}으로 사용한다.

🐣 반복문(map)사용 예제

function App (){
  let [title, setTitle] = useState(['신촌 맛집', '넷플릭스 추천', '인기 도서'])
  let [누른버튼, 누른버튼변경함수] = useState(0)

  return (
    <div>
      // title state에 반복문(map)을 적용한다(title의 요소 갯수만큼 반복문이 돈다)
      { title.map(function(a, i){    // 인자로 a(title의 각 요소)와 i(0,1,2...)를 받는다
        return (
        <div className="list" key={i}>  // 반복문에는 꼭 key={}를 써주기
          <h3 onClick={ ()=>{ 누른제목변경(i) } }> { a } <span>👍</span> </h3>
          // { a } 에는 title의 각 요소가 들어간다 
          // { 누른제목변경(i) }에는 0, 1, 2 숫자가 반복된다
          <p>2월 18일 발행</p>
          <hr />
        </div>
      }) }
    </div>
  )
}



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

❗ 반복문에는 꼭 key={i} 를 붙여줘야 한다. key에는 0, 1, 2... 이렇게 하나씩 증가하는 변수같은걸 넣어줘야 한다. 따라서 두번째 인자인 i를 넣어주는게 관습.