map 말고 for 반복문 사용안되는 문제

[박세진]

'(UI 제작 패턴) props를 응용한 상세페이지 만들기' 강의에서 질문있습니다.

/* eslint-disable */
import React, {useState} from 'react';
import './App.css';

function App() {
 
  let [currentTitle, changingTitle] = useState(['남자 코트 추천', '남녀 코디 모음', '올해의 코디'])
  let [like, changingLike] = useState(0)
  let [modal, changingModal] = useState(false)
  let [posts, changingPosts] = useState(0)
  function changingTitleFunction(){
    var sexArray = [...currentTitle]  //deep copy
    sexArray[0] = '여자 코트 추천'
    changingTitle(sexArray)
  }

  function changingOrderFunction(){
    var orderArray = [...currentTitle]
    orderArray.sort()
    changingTitle(orderArray)
  }

  function changingLikeFunction() {
    changingLike(like+1)
  }

  function modalFunction() {
    changingModal(!modal)
  }

  function addressModalFunction() {
    changingAddressModal(!addressModal)
  }

  function Post() {
    var postArray = []

    for (var i = 0; i<3; i++){
      postArray.push(
        <div className="list">
          <h3 onClick={ () => changingPosts(i)}>{currentTitle[i]} </h3>
          <span onClick={ changingLikeFunction }>👍</span> {like}
          <p>?월 ?일 발행</p>
          <hr />
        </div>
      )
    }

    return postArray
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>

      <button onClick={ changingTitleFunction }>남/녀</button>
      <button onClick={ changingOrderFunction }>정렬</button>

      {Post()}
      <button onClick={() => { changingPosts(0) }}>버튼1</button>
      <button onClick={() => { changingPosts(1) }}>버튼2</button>
      <button onClick={() => { changingPosts(2) }}>버튼3</button>

      <button onClick={modalFunction}>포스트</button>
      {/* 자식component에 props전달 ) <자식component 작명={state명}/>*/}
      {modal === true ? <Modal currentTitle={currentTitle} posts={posts}/> : null}
    </div>   
  );
}

function Modal(props){
  return(
      <div className='modal'>
        <h2>{props.currentTitle[props.posts]}</h2>  
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

export default App;

 

위 코드는 강사님 코드보고 학습하면서 만든것인데요,

 

위 코드에서 map반복문 부분인

 {
          currentTitle.map( function(titleData, i){
            return(
            <div className="list">
              <h3 onClick={() => { changingPosts(i) }}>{titleData} </h3>
              <span onClick={ changingLikeFunction }>👍</span> {like}
              <p>?월 ?일 발행</p>
              <hr />
            </div>)
        })
}

이 부분을 for 반복문을 이용해서

 

function Post() {
    var postArray = []

    for (var i = 0; i<3; i++){
      postArray.push(
        <div className="list">
          <h3 onClick={ () => changingPosts(i)}>{currentTitle[i]} </h3>
          <span onClick={ changingLikeFunction }>👍</span> {like}
          <p>?월 ?일 발행</p>
          <hr />
        </div>
      )
    }

    return postArray
  }

저는 이렇게 만들어서 했는데요, 제목에 써둔 강의 이전에는 정상작동되다가 h3태그 누르면 modal의 제목부분이 바뀌는부분에서 안됩니다...

onClick={ () => changingPosts(i)} 이부분이 문제인것같은데 막상 보면 뭐가 틀렸길레 안되는지 모르겠네요...

 

강사님이 설명한 map부분을 for문으로 고쳐서 쓰려고 한다면 어떻게 써야할까요?

[codingapple]

반복문의 var을 let으로 바꿔봅시다 

[글쓴이]

글