📍 1. 기본 구성 소개

👀 1. 기존 코드 살펴보기

function App() {
  let [타이틀] = useState(['1. JavaScript의 개요', '2. JavaScript의 역사', '3. JavaScript의 개발도구'])
  let [작성일자] = useState(['2023-02-21', '2023-02-22', '2023-02-23'])
  return (
      <div className='list'>
          <h1 onClick = { () => { setModal(!modal) }}>{ 타이틀[0] }</h1>
          <p>{ 작성일자[0] }</p>
      </div>
      <div className='list'>
          <h1 onClick = { () => { setModal(!modal) }}>{ 타이틀[1] }</h1>
          <p>{ 작성일자[1] }</p>
      </div>
      <div className='list'>
          <h1 onClick = { () => { setModal(!modal) }}>{ 타이틀[2] }</h1>
          <p>{ 작성일자[2] }</p>
      </div>
	)
}

🔹 설명

• 비슷한 코드들의 반복

👀 2. map함수 사용

function App() {
   let [타이틀] = useState(['1. JavaScript의 개요', '2. JavaScript의 역사', '3. JavaScript의 개발도구']);
  let [작성일자] = useState(['2023-02-21', '2023-02-22', '2023-02-23'])
  return (
      {
        타이틀.map(function(a, i) {
          return (
            <div className='list'>
              <h1 onClick = { () => { setModal(!modal) }}>{ 타이틀[i] }</h1>
              <p>{ 작성일자[i] }</p>
            </div>
          )
        })
      }
	)
}

🔹 설명

map함수를 사용하여 타이틀 변수에 지정된 state만큼 값을 출력해준다.

👀 3. map함수 설명

1 function App() {
2   let [함수] = useState(['Array형식 값 1','Array형식 값 2','Array형식 값 3'])
3   return (
4   함수.map(function(a, i){
5       return (
6           <div className='list'>
7               <h1 onClick = { () => { setModal(!modal) } }>{ 함수[i] }</h1>
8           </div>
9       )
10 	 )
11 }

🔹 설명

1. [Line 2] : 함수라는 변수 안에는 총 3가지의 값 형식들이 존재한다.
2. [Line 4]
   (1) 함수.map :
   함수에 들어있는 변수의 개수만큼
   (2) function (a, i)
   a = 변수명 / i = Array 인덱스 ([0],[1],[2],[3],[4],[5]...)
3. [Line 7]
   (1) 함수[i]
   array 인덱스를 담아준다.