리액트 복습 - 게시글 눌렀을 때 모달창으로 해당 글 띄우기

 

게시글 클릭하면 해당 게시글을 보고싶어요!

 

기존에 만든 게시판에서 글을 클릭하면 내가 하드코딩한 글만 계속 보였다. 그래서 오늘은 글을 클릭하면 해당 게시글의 제목이 표출되도록 해보았다.

const postName = [
    "여자 코트 추천",
    "강남 우동 맛집",
    "파이썬 독학"
];

const [name, setName] = useState(postName);
const [modal, setModal] = useState(false);
const [title, setTitle] = useState(0);

const modalHandler = () => {
    setModal(true);

    if (modal) {
      setModal(false);
    }
}

 

우선 게시글의 제목은 위 코드의 postName과 같고, useState의 기본값으로 설정해주었다. 

 

모달창은 누르면 열리고, 다시 누르면 닫히도록 해주었고, 기본값으로 false 값을 주었다.

const Modal = (props) => {
    return (
      <div className="modal">
        <h4>{props.name}</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    );
}

      {name.map((data, i) => {
        return (
          <div className="list" key={i}>
            <h4 className="post" onClick={() => {modalHandler(i); setTitle(i)}}>
              {data}
              <span onClick={likeChangeHandler} className="likeSpan">
                👍
              </span>
              {like[i]}
            </h4>
            <p>1월 4일 발행</p>
          </div>
        );
      })}

 

모달창이 열릴 때는 제목, 날짜, 상세내용이 나오도록 하여 기본적인 세팅을 마무리하였다.

 

return문에서는 게시글이 3개여서 각각의 글이 표출되도록 해야 하므로 map함수를 사용했다. 현재 만든 게시글의 날짜와 상세내용은 모두 같고 글 제목만 달라서 name을 반복해주었다.

 

map함수에서 두 번째 인자는 1씩 더하는 역할을 하는데, 여기서는 각각의 글을 연결하는 기능을 하게 된다. 

 

제목을 누르면 모달창이 열리면서 해당 글의 제목이 표출되어야 하므로 h4 태그에 onClick 함수를 넣어서 모달창을 띄우는 함수를 넣고, title 변경함수에 i 매개변수를 넣어서 사용자가 클릭한 글의 제목이 나오도록 해주었다.

 

게시글 열기 전(좌)과 열고난 후(우)