따봉 만들기에 대해서..

[박찬우]

const [title, setTitle] = useState([
"남자 코트 추천",
"강남 우동 맛집",
"파이썬 독학",
]);

let [like, setLike] = useState([0, 0, 0]);

const [selectTilte, setSeletTitle] = useState(0);

function Modal({ title, selectTilte }) {
return (
<div className="modal">
<h2>{title[selectTilte]}</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
);
}

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

{title.map((title, i) => {
return (
<div className="list">
<h4
onClick={() => {
setModal(!modal), setSeletTitle(i);
}}
>
{title}
<span
onClick={() => {
setLike(like[i] + 1);
}}
>
?
</span>
{like[i]}
</h4>
<p>2월 17일 발행</p>
<p></p>
<hr />
</div>
);
})}
{modal === true ? (
<Modal title={title} selectTilte={selectTilte}></Modal>
) : null}
</div>
);
}

export default App;

map( title, i )에서 i가 0 , 1 , 2 라면
setLike(like[i] + 1) 을 사용하여  like 배열과 파라메타 i 를 동시에 활용하고 싶었는데
?을 클릭했을때 무엇때문인지 안되네요

[codingapple]

 like[1] 에  1을 더해주세요~ 이런 식으로 직접 state를 수정하는건 불가능합니다. 

언제나 state의 shallow/deep 카피본을 하나 만들어서 그걸 수정하시길 바랍니다.

[박찬우]

import React, { useState } from "react";<br />
import "./App.css";<br />
<br />
function App() {<br />
  const [card, setCard] = useState([<br />
    { title: "남자코트 추천", like: 0 },<br />
    { title: "강남 우동맛집", like: 0 },<br />
    { title: "리엑트 독학", like: 0 },<br />
  ]);<br />
<br />
  function Card(a, { i }) {<br />
    var newArray = [...card];<br />
    newArray[i].like = newArray[i].like + 1;<br />
    setCard(newArray);<br />
  }<br />
  const [modal, setModal] = useState(false); //on,off 스위치를 만들어준다.<br />
<br />
  return (<br />
    <div className="App"><br />
      <div className="black-nav"><br />
        <div>개발 Blog</div><br />
      </div><br />
      {modal === true ? <Modal></Modal> : null}<br />
      {card.map((a, i) => {<br />
        return (<br />
          <div className="list"><br />
            <h3<br />
              onClick={() => {<br />
                setModal(!modal);<br />
              }}<br />
            ><br />
              {card[i].title}<br />
            </h3><br />
            <span<br />
              onClick={(a) => {<br />
                Card(a, { i });<br />
              }}<br />
            ><br />
              ?<br />
            </span><br />
            {card[i].like}<br />
            <p>날짜</p><br />
            <hr /><br />
          </div><br />
        );<br />
      })}<br />
    </div><br />
  );<br />
}<br />
<br />
function Modal() {<br />
  return (<br />
    <div className="modal"><br />
      <h2>제목</h2><br />
      <p>날짜</p><br />
      <p>상세내용</p><br />
    </div><br />
  );<br />
}<br />
export default App;<br />
<br />
shallow/deep 카피본의 힌트를 얻어서 좀 더 깔끔하게 데이터화 시켜보았습니다.<br />
title과 like 데이터를 객체로 같이 묶어서 진행해보았는데<br />
결과가 만족스럽네요 감사합니다^^<br />
덕분에 구글링 검색도 자신감이 붙었어요

 

[codingapple]

잘되신다니 다행입니다 

컴포넌트가 아닌 함수의 이름은 소문자로 시작하는 작명을 추천드립니다 

나중에 컴포넌트함수랑 일반함수랑 헷갈려서요 

 

[박찬우]

네 수정하고 계속해서 진행 해보겠습니다

[글쓴이]

글