[React] 8. Props 응용

제목을 누를때 각각 다른 모달창이 뜨게 하려면?

1. 0,1,2번째 중 몇번째 제목을 눌렀는지 상태정보를 state로 저장
2. state가 0일때는 0번째 제목을 출력, state가 1일때는 1번째 제목을 출력해주면 될거 같다!!

우선 연습을 위해 버튼을 만들어주자

<button onClick={()=>{}}>버튼1</button>
<button onClick={()=>{}}>버튼2</button>
<button onClick={()=>{}}>버튼3</button>

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

하드 코딩 되어있는 name[1]이 각각 name[0], name[1], name[2]로 변하게 만들어주면 될거 같다

state를 하나 만들어주자

let [titleNum, setTitleNum]=useState(0);

titleNum은 부모의 state이기때문에 Modal 컴포넌트에 props로 전달해주자

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

Modal 컴포넌트에 titleNum의 값 0이 전달 되었다

이제 버튼을 누를때마다 state값이 변하게만 해주면 될것이다!!!!!!!

<button onClick={() => {setTitleNum(0);}}>버튼1</button>
<button onClick={() => {setTitleNum(1);}}>버튼2</button>
<button onClick={() => {setTitleNum(2);}}>버튼3</button>

각각 버튼을 눌렀을때 state값이 바뀌도록 해주면 끝!!!

각각의 버튼을 누를때마다 다른 제목이 잘나온다ㅎㅎ

글제목을 눌렀을때 이제 각각 다른 모달창이 뜨게 합시다

코드를 살짝만 바꿔주면 된다
map함수의 두번째 인자를 활용

{글제목.map((item, i) => {
        return (
          <div className="list">
            <h3 onClick={() => {setTitleNum(i);}}>
              {item}
              <span
                onClick={() => {
                  setCount(count + 1);
                }}
              >
                💖
              </span>
              {count}
            </h3>
            <p>2월 18일 발행</p>
            <hr />
          </div>
        );
      })}

map함수의 두번째 인자 i는 반복문이 돌때마다 0,1,2..가 되는 변수이다

---

비슷한 방식으로 좋아요 버튼을 눌렀을때 각각의 제목에서 카운팅 되도록 만들었다

.
.
.
let [likeCount, setLikeCount] = useState([0, 0, 0]);

  const likeCountFunc = (i) => {
    let copyCount = [...likeCount];
    copyCount[i]++;
    setLikeCount(copyCount);
  };
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>

      {글제목.map((item, i) => {
        return (
          <div className="list">
            <h3
              onClick={() => {
                setTitleNum(i);
              }}
            >
              {item}
              <span
                onClick={() => {
                  likeCountFunc(i);
                }}
              >
                💖
              </span>
              {likeCount[i]}
            </h3>
            <p>2월 18일 발행</p>
            <hr />
          </div>
        );
      })}
 .
 .
 .

굳ㅎㅎ

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)