props를 응용한 상세페이지

[최문길]

function App(){
=========
 let [modal,setModal] = useState([false,false,false]);
const [글제목, 글제목변경] = useState(['남자코트 추천','강남 우동맛집', '파이썬 독학'])

===========
return(
 {
      글제목.map(function(a,i){
        let count = 0;
        return (
        <div className="list" key={i} data-id = {i}>
          <h4 onClick={(e)=>{
              let check = parseFloat( e.currentTarget.parentNode.dataset.id)
              let copy = [...modal];
             
              copy.map((a,i)=> {
                 if(copy[check] == false) {
                  copy[i] = false
                  return copy[check] = true
                 } else {
                  copy[i] = false
                  return copy[check] =false
                 }
              })
.
.
.
    {
     modal.map(function(a,i) {
            return(
              a== true ? <Modal  글제목 = {글제목[i]} modal = {modal}/> : null
            )
          })

==========

function Modal(props) {
  const title = props.글제목;

  return (
    <div className='modal'>
    <h4>{title}</h4>
    <p>날짜</p>
    <p>상세내용</p>
    <button>글수정</button>
  </div>
    )
  }

========

Q. 지금 누른 글제목이 모달창안에 뜨게 하고 싶으면 어떻게 코드를 짜야할까요?

0번 글을 누르면 0번 글제목이 모달창안에 등장하고

1번 글을 누르면 1번 글제목이 모달창안에 등장하고

그런 식으로 동작하게 만들어봅시다. 

다 배운내용이라 강의 듣지말고 알아서 해봅시다. 

----------
이거  혼자서 만들어봤씁니다. 아직 강의 재생 전이구 

답장 달리면 답글 보고 재생하려고 합니다.

생자바스크립트 식으로 짜지 말라고 이야기 하셔서
계속 코드 리뷰를 하게 되네요 

아직 감이 안잡혀요 ㅜㅜ 

if문 썻구요.. 먼가 삼항식으로는 제 머리론 안될거 같아서요 ..

리뷰 부탁드리겠습니다. 

[codingapple]

동적으로 바뀌는 제목 만들고 싶으면 
현재 제목상태 저장할 state 하나 만들고 
state에 따라서 어떻게 제목 바뀔지 코드짜놓고 
원할 때 state 변경하면 됩니다 

그 state는 App이랑 Modal 컴포넌트에 둘다 필요할거같은데 App에 만들면 되겠군요

[최문길]

function App(){
  const [글제목, 글제목변경] = useState(['남자코트 추천','강남 우동맛집', '파이썬 독학'])
  let  [title,setTitle] = useState(null)

<h4 onClick={(e)=>{
              setTitle(글제목[i])
               setModal(!modal)
            }}>

    
        {
            modal== true ? <Modal title= {title}/> : null
        }


-----
function Modal(props) {
  const title = props.title;
  return (
    <div className='modal'>
    <h4>{title}</h4>
    <p>날짜</p>
    <p>상세내용</p>
    <button>글수정</button>
  </div>
    )
  }

이렇게 라는 거죠?

[codingapple]

잘한듯요

[글쓴이]

글