• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 글발행 버튼 누르면 따봉이 제대로 나타나지 않습니다.

글발행 버튼 누르면 따봉이 제대로 나타나지 않습니다.

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 글쓴이
  • #39144

    정은이
    참가자
    import logo from './logo.svg';
    import './App.css';
    import { useState } from 'react';
    function App() {
    let post = '강남 우동 맛집';
    let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']);
    let [따봉, 따봉변경] = useState([0, 0, 0]);
    let [modal, setModal] = useState(false);
    let [title, setTitle] = useState(0);
    let [입력값, 입력값변경] = useState('');
    return (
    <div className="App">
    <div className="black-nav">
    <h4>ReactBlog</h4>
    </div>
    
    
    {
    글제목.map(function (a, i) {
    return (
    <div className="list" key={i}>
    <h4 onClick={() => { setModal(!modal); setTitle(i) }}>{글제목[i]}<span onClick={() => {
    let copy = [...따봉];
    copy[i] = copy[i] + 1;
    따봉변경(copy);
     }}> 👍</span> {따봉[i]}</h4>
     
    <p>7월 18일 발행 
    </p>
    <button onClick={()=>{ 
    let copy = [...글제목];
    copy.splice(i, 1);
    글제목변경(copy);
     }}>삭제</button>
    </div>
     )
     })
    }
     
    <div>
    <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
    <button onClick={()=>{ 
    let copy = [...글제목];
    copy.unshift(입력값);
    글제목변경(copy)
     }}>글발행</button>
    </div>
     
    {
    modal == true ? <Modal title={title} 글제목변경={글제목변경} 글제목={글제목}/> : null
    }
    </div>
     )
    }
    function Modal(props) {
    return (
    <div className="modal">
    <h4>{props.글제목[props.title]}</h4>
    <p>날짜</p>
    <p>상세내용</p>
    <button>글수정</button>
    </div>
     )
    }
    export default App;
    // let copy = [...글제목];
    // copy.unshift(입력값);
    // 글제목변경(copy)
    코드는 위와 같고 선생님 따라서 하고있었는데, 글발행을 하면 맨위에 새 글이 추가되고 맨아래있던 글의 따봉은 NaN으로 바뀝니다. 
    왜이런걸까요.
    
    
    
     
    두번째로 숙제로 했을때에는
    
    <div>
    <input onChange={(e) => { 입력값변경(e.target.value) }} />
    <button onClick={() => {
    let copy = [...글제목];
    copy = [...글제목, 입력값];
    글제목변경(copy);
    let copy2 = [...따봉];
    copy2 = [...따봉, 0];
    따봉변경(copy2);
     }}>글발행</button>
    </div>
    
    글발행으로 글을 추가하는 코드를 위와같이 짰는데, 코드가 괜찮은지 알고싶습니다. 비효율적인지? 선호하지않느 방법이라던지..?!
    
    감사합니다.
    #39151

    codingapple
    키 마스터
    NaN은 글발행누르면 글은 4개 되는데 따봉갯수기록할 곳은 3개뿐이라 그런듯요 
    밑에는 별문제없어보입니다 
    
    
    #39155

    정은이
    참가자
    따봉 공간을 그럼 어떻게 같이 추가하나요..? 매번 글발행을 하면 늘어날텐데
    왜 스앵님이랑 같이 했는데 저만 공간이 없나요..?ㅠㅠ
    #39189

    codingapple
    키 마스터
    강의에선 안했습니다
    밑에코드에서 잘 추가한거같은디요
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠