props 응용

부모 컴포넌트의 글제목을 누르면 자식 컴포넌트의 제목이 동일하게 바뀌도록 해보자

1. html css로 ui 미리 디자인.
   • 부모컴포넌트에서 받아온 글제목, title을 적절하게 나타내도록 ui를 짜기.

const Modal = (props) => {
  return (
    <div className="modal">
      <h4>{props.글제목[props.title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button>글수정</button>
    </div>
  );
};

2. 현재 ui의 상태를 state로 만들기
   • title state 생성. 기본 0. setTitle로 0을 다른 숫자로 변경 가능.
   • 자식 컴포넌트에 props로 글제목과 title 컴포넌트를 보냄.

//App 컴포넌트
	//부모 컴포넌트의 글제목 state.
  let [글제목, 글제목변경] = useState([
    "첫번째 글제목",
    "두번째 글제목",
    "세번째 글제목",
  ]);
	//자식컴포넌트의 글제목 스위치 state.
  let [title, setTitle] = useState(0);
	//자식컴포넌트 보여주고 안보여주고 스위치 state
  let [modal, setModal] = useState(false);
.
.
.
//modal state가 true면 보여주기. 아니면 안보여주기. props로 title과 글제목 보냄
{modal == true ? <Modal title={title} 글제목={글제목} /> : null}

3. state에 따라 ui를 바꿔주기
   • 글제목 map 안에 setTitle 삽입. 글제목을 누르면, i값에 따라 title값이 변경됨.

	//글제목 state의 개수만큼 반복
      {글제목.map(function (a, i) {
        return (
          //key값 : i. 0,1,2가 됨.
          <div className="list" key={i}>
            <h4 
              onClick={() => {
                setModal(true); // 클릭시 modal을 true로 변경.
                setTitle(i); // title state값을 i값으로 변경.
              }}
            >
			.
            .
            .
          </div>
        );
      })}

결과

부모컴포넌트의 글제목 클릭 시, 자식컴포넌트의 글제목도 잘 변경됨.