리액트(React)-props로 UI제작

props를 통해 상세페이지 UI를 만들기.

제목을 누를때마다 각각 다른 모달창이 뜨게 하기

먼저
UI를 만들려면
1. UI와 관련된 정보들을 state에 담고,
2. state에 따라 UI가 수정되게 만든다.

이전에 만들어뒀던 modal 컴포넌트는

function Modal(props) {
  return (
    <div className="modal">
      <h2>{props.글제목[1]}</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

글제목[1] 이런식으로 하드코딩이 되어있다.
현재 목표는
버튼2를 누르면 글제목[2]가 되고 버튼0을 누르면 글제목[0]이 되야 한다는 것을 주목해야한다.
이를 위한, 즉 0,1,2를 가지는 변수를 하나 새로 만들어주면 된다.
let [누른제목, 누른제목변경] = useState(0);

function Modal(props){
return(
...
<h2>{props.글제목[누른제목]}</h2>
	);
}

당연히 작동하지 않는다.
누른제목 은 App(){}이라는 컴포넌트가 갖고 있는 state니까.

앞선 강의에서 글제목 이라는 state를 넘겼듯이 마찬가지로 props를 통해 넘겨줘야한다.

 {modal === true ? <Modal 글제목={글제목} 누른제목={누른제목}></Modal> : null}

글제목을 props로 전송하기 위해 Modal의 컴포넌트에 넣었듯 옆에 또 해준다.

function Modal(props) {
  return (
    <div className="modal">
      <h2>{props.글제목[props.누른제목]}</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

다음으로
0번째 버튼을 누르면 '누른제목' 이라는 state가 0이 되도록 해야 한다.

 <button onClick={
   () => {
          {누른제목변경(0);}
   }}>1번</button>

누른제목변경state 함수를 작성해주면 된다.

state를 변경할 땐 변경함수를 사용하자

---

그렇다면 버튼이 아니라,
제목을 눌렀을 때 각각 다른 모달창이 뜨게 하기 위해선?

{글제목.map(function (글, i) {
        return (
          <div className="list">
            <h3
              onClick={() => {
                누른제목변경(i);
              }}
            >
              {글}
              <span
                onClick={() => {
                  // 따봉변경(따봉 을 대체할 데이터 넣어주기)
                  // 이벤트리스너 안에는 무조건 함수 넣어주어야 한다.
                  따봉변경(따봉 + 1);
                }}
              >
                따봉💛
              </span>
              {따봉}
            </h3>
            <p>2월 18일 발행</p>
            <hr />
          </div>
        );
      })}

button의 onClick 기능을 그대로 h3에 넣어주면 당연히 된다.
하지만 누른제목변경(0), 누른제목변경(1)... 이런식으로 하드코딩은 별로.

파라미터에 i를 추가해주고, 누른제목변경(i)를 해준다.
map반복문이 돌 때마다 0,1,2... 가 될 것이다.