(React) 블로그 만들기 - 상세화면 데이터 처리

저번에 만들 Modal이 보여질때 클릭한 게시글에 해당하는 title과 date를 보여주고 싶다면?
props를 이용해 부모로부터 자식에게 state를 물려줘야 자식이 state를 사용할 수 있다.
그리고 선택한 게시물의 고유번호를 알아야겠지?
그러면 selected 라는 state를 추가해주고 posts와 selected를 모두 자식에게 넘겨주자.

function App(){
  	.
    .
  	const [selected, setSelected] = useState(0);
  	return(
      .
      .
	  {posts.map((post, index) => {
        return (
          <div key={index} className="list">
            <h3
              onClick={() => {
                setSelected(index);
                setModal(true);
              }}
            >
              {post.title}
              <span
                onClick={(e) => {
                  e.stopPropagation();
                  const newLiked = [...liked];
                  newLiked[index] += 1;
                  setLiked(newLiked);
                }}
              >
                ❤️
              </span>
              {liked[index] + " "}
            </h3>
            <p>{post.date}</p>
            <hr />
          </div>
        );
	  })}
	{modal == true ? <Modal selected={selected} posts={posts} /> : ""}
}

function Modal(props){
  	const i = props.selected;
	return (
    <div className="modal">
      <h2>{props.posts[i].title}</h2>
      <p>{props.posts[i].date}</p>
      <p>상세내용</p>
    </div>
  );
}

이렇게 하면 선택된 게시물의 title과 date가 상세화면에 동기화 될 것이다.

props 전달의 특징

1. Modal의 props는 state가 아니라더라도 {일반변수},{함수명},"문자열" 이런식으로 어떤 것도 전달 가능하다.
2. 자식->부모 방향의 전달은 불가능.
3. 같은 깊이의(?) Component 한테도 전달 불가능.
4. state를 공유하는 Component 들이 많을때, 최고 부모에게 state를 생성한다.