[React] 부모 Component -> 자식 Component에게 함수/리스 전달하기

이번에는 데이터를 추가해보겠습니다!

App>DiaryList>DiaryItem 부모>자식>손자에게 onDelete함수를 전달하겠습니다.

우선, App에서 DiaryList로 onDelete함수를 props로 전달,전달해주겠습니다.

const App = () => {
  return (
    <div className="App">
      <DiaryList onDelete={onDelete} diaryList={data} />
    </div>
  );
}

DiaryList입니다. onDelete를 props로 전달받아, DiaryItem에게 props로 전달하였습니다.

const DiaryList = ({ diaryList, onDelete }) => {
  return(
    <div>
        {diaryList.map((it)=>(
          <DiaryItem key={it.id}{...it} onDelete = {onDelete} />
        ))}
    </div>
  )
};

DiaryItem입니다. onDelete함수를 props로 전달받아 button의 onClick 이벤트함수로 bind해주었습니다.

if(window.confirm(" "){ }로, alert창을 띄워, 확인을 누르면 { }를 실행합니다.

const DiaryItem = ({
  author,
  content,
  created_date,
  emotion,
  id,
  onDelete,
}) => {
  return(
    <button onClick={() =>{
      console.log(id);
      if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)){
      	onDelete(id);
      }
    }
    />
  )
}

다음은 App에서 만든 onDelete함수입니다.

const onDelete = (targetId) => {
  console.log(`${targetId}가 삭제되었습니다.`);
  const newDiaryList = data.filter((it) => it.id !== targetId);
  setData(newDiaryList);
};

targetId를 인수로 전달받습니다. 위에서DiaryItem(id)에서 전달한 매게변수입니다.

새로운 리스트 newDiaryList를 만들어, data.filter((it) => it.id!=targetId); setData(newDiaryList); 로, 전달받은 인수 targetId를 제외한 요소들로 리스트를 재구성해줍니다.

 

---

오늘은 리스트를 만들어, 부모 Component에서 자식 Component를 전달하여 이를 사용해볼건데요.

우선, 리스트를 부모 Component에 정의해볼게요.

const emotionList = [
  {
    emotion_id: 1,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`,
    emotion_descript: "완전 좋음",
  },
  {
    emotion_id: 2,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`,
    emotion_descript: "좋음",
  },
  {
    emotion_id: 3,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`,
    emotion_descript: "그럭저럭",
  },
  {
    emotion_id: 4,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`,
    emotion_descript: "나쁨",
  },
  {
    emotion_id: 5,
    emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`,
    emotion_descript: "끔찍함",
  },
];

부모 Component 내부입니다. map을 통해 위에서 만든 emotionList를 하나씩 꺼내 it에 집어 넣은 후, key값을 it.emotion_id로    it를 전달해줍니다.

const DiaryEditor = () => {
  return (
    <div className="DiaryEditor">
      <div>
        <section>
          <h4>오늘의 감정</h4>
          <div className="input_box emotion_list_wrapper">
            {emotionList.map((it) => (
              <EmotionItem key={it.emotion_id} {...it} />
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

자식 Component입니다.

const EmotionItem = ({
  emotion_id,
  emotion_img,
  emotion_descript,
}) => {
  return (
    <div key={emotion_id}>
      <img src={emotion_img} />
      <span>{emotion_descript}</span>
    </div>
  );
};

export default EmotionItem;

props로 전달받은 emotion_id,emotionimg,emotion_descript를 받은 후, key=emotionid, src=emotion_img, 내용=emotion_descript를 해줍니다.

위에서 볼 수 있듯이 props로 내보낼 때와 받을 때 모두 {중괄호}를 사용하여야 합니다.