[React] 자식 컴포넌트에서 부모 컴포넌트에게 값 넘기는 방법

☘️ 파일 구조

리액트는 기본적으로 부모가 자식에게 값을 넘길 수 있고, 자식은 부모에게 값을 줄 수 없습니다.

기본적인 이러한 원칙을 깨는 방식을 생각해서 딱히 권장하는 방법은 아닌 것 같습니다. ( 제 생각입니다.)

<div className={styles.ReviewRegist}>
  <Header title={"스터디 리뷰 작성"} />
  <div className={styles.wrapper}>
    <StudyReview data={studyInfo} />
    <StudyReview data={leaderInfo} />
    <div className={styles.writeFormButton}>
      <MediumButton text={"취소"} type={"Gray"} onClick={onCancle} />
      <MediumButton text={"등록"} type={"Purple"} onClick={onRegist} />
    </div>
  </div>
</div>

- page.js에 각각의 StudyReview 값을 받아서 page.js에 넘겨야 하는 구조

---

☘️ 방법

1) 부모 컴포넌트에 state 생성하기

이때의 state는 자식 컴포넌트에서 값을 받을 state를 생성해 주면 된다.

위에 같은 경우에는 별점과 input의 값을 담을 stdPoint, content를 생성했다.

  const [studyValue, setStudyValue] = useState({
    stdPoint: 0,
    content: null,
    stdId: stdId,
  });

 

2) 부모 컴포넌트에 state를 변경해 줄 함수 생성하기

나의 경우는 2개의 state를 변경해야 했기 때문에 setValue도 변수를 사용했지만, 

값이 하나라면 변수를 안 써도 된다.

원래의 state값, 변경할 state 함수, 변경할 값, key 값으로 함수를 만들어 줬다.

  const changeState = (value, setValue, input, field) => {
    setValue({ ...value, [field]: input });
  };

 

3) 자식 컴포넌트에 props로 만든 state와 함수를 보내주기

 <StudyReview value={studyValue} setValue={setStudyValue} changeState={changeState} />

 

4) 자식 컴포넌트에서 함수 실행하기

const handleTextarea = (e) => {
	changeState(value, setValue, e, "content");
};

<textarea
    value={value.content}
    onChange={(e) => handleTextarea(e.target.value)}
    placeholder={`${data.title}에 대한 상세한 리뷰를 남겨주세요.`}
/>

textarea에 이벤트 핸들러를 생성해서 입력한 값을 전달하고 그 전달받은 값을 부모에게서 받은 changeState로 상태를 변경해 주면 된다.

 

정리하자면, 상태를 변경하는 함수를 만들어서 부모에서 자식에게 전달하면 된다.