자식 컴포넌트에서 부모 컴포넌트로 값 보내기

하고자 하는 방향

• 부모에서는 useState로 value와 setvalue 값만 받아오고, 자식 컴포넌트에서 onChange 혹은 다른 기능들을 수행한 후, 부모 컴포넌트에게 보내준다.

하는 방법

부모 컴포넌트의 이름은 Test이고, 자식 컴포넌트 이름은 Accordion

1. 내가 보내고자 하는 컴포넌트의 타입에 value와 setvalue 값을 추가해준다.

   value?: string;
    setvalue?: React.Dispatch<React.SetStateAction<string>>;

   
   

2. 부모 컴포넌트(Test)에서 자식 컴포넌트(Accordion)을 호출할 때 value 값과 setValue 값을 넣어서 호출한다.

   export const test = () => {
   const [text, setText] = React.useState("");
   return (
     <Accordion value={text} setvalue={setText}></Accordion>
   );
   };

   
   

3. 자식 컴포넌트에서 value와 setvalue 값을 받아온다.

• type 선언도 옆에서 해줌! 아까 1번에서 했던 type이다.

• onChange에서 받아온 setvalue 값으로 값을 설정해주고, TextField의 value 값도 받아온 value 값으로 설정해준다.

  export const Accordion = ({
  value,
  setvalue,
  }: AccordionBaseProps) => {
  const handleChange = (event: any) => {
    setvalue && setvalue(event.target.value);
  }
  
  return (
    <TextField value={value} onChange={handleChange} />
  )}
  

끝!