[React] 자식 Component에서 부모 Componet로 값 변경하여 전달하기

https://peter-coding.tistory.com/192

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

이 예제를 이어서 작성해보겠습니다.

부모 Component -> 자식 Component에게 props로 emotion_id,img,descript를 담은 리스트를 전달하였었습니다.

이번에는 부모 Component에서 state를 만들어 변경 함수를 자식 Component에게 전달한 후, 부모 Component의 state값을 변경시켜보겠습니다.

여기서 그냥 변수가 아닌 state를 사용하는 이유는 App컴포넌트의 렌더링 결과물에 영향을 주기 때문입니다. 변수를 변경시켰다면 렌더링 결과물에 영향을 주지 않았을 것입니다. props는 컴포넌트에서 컴포넌트로 전달을, state는 컴포넌트 내에서 관리된다는 차이점이 있습니다.

부모 Component입니다.

31 : useState를 이용하여 emotion state를 정의해주었습니다. 기본값은 중간값인 3으로 설정해주었습니다.

32~34 : handleClickEmote를 정의해주었습니다. handleClickEmote는 emotion매게변수를 받아서 emotion state를 변경해주는 함수입니다. 이 함수는 props로 자식 Component에게 전달해주기 위해 만들어졌습니다.

48 : onClick함수에 위에서 만든 handleClickEmote함수를 전달해주었습니다. 이 div를 클릭하면 실행될 것입니다.

49 : isSelected props로 지금 선택한 emotion_id와 emotion이 일치한지 비교해 같다면 True를 전달할 것입니다.

import React, { useState } from "react";
import EmotionItem from "./EmotionItem";
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: "끔찍함",
  },
];
const DiaryEditor = () => {
  const [emotion, setEmotion] = useState(3);
  const handleClickEmote = (emotion) => {
    setEmotion(emotion);
  };
  const handleClickEmote = (emotion) => {
    setEmotion(emotion);
  };
  return (
    <div className="DiaryEditor">
      <div>
        <section>
          <h4>오늘의 감정</h4>
          <div className="input_box emotion_list_wrapper">
            {emotionList.map((it) => (
              <EmotionItem
                key={it.emotion_id}
                {...it}
                onClick={handleClickEmote}
                isSelected={it.emotion_id === emotion}
              />
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default DiaryEditor;

자식 Component입니다.

5~6 : props로 전달받은 onClick,isSelected를 인수에 추가해주었습니다.

10~13 : class명으로 공통적으로 EmotionItem를 주고, isSelected가 True이면 전자, False이면 후자가 추가되도록 하였습니다.

14 : onClick 속성으로 props로 전달받은 onClick함수를 넣고, 인수로 emotion_id를 넣었습니다. 이 인수는 부모 Component의 handleClickEmote의 인수 emotion에 들어갈 것입니다. 그럼으로써 setEmotion(emotion)이 실행될것입니다.

const EmotionItem = ({
  emotion_id,
  emotion_img,
  emotion_descript,
  onClick,
  isSelected,
}) => {
  return (
    <div
      className={[
        "EmotionItem",
        isSelected ? `EmotionItem_on_${emotion_id}` : `EmotionItem_off`,
      ].join(" ")}
      key={emotion_id}
      onClick={() => onClick(emotion_id)}
    >
      <img src={emotion_img} />
      <span>{emotion_descript}</span>
    </div>
  );
};

export default EmotionItem;