React(53) 타입스크립트 - 체크박스 약관 선택 이벤트 / 자식에서 부모로 데이터 보내기

 

 

여태까지는 부모에서 자식으로 데이터를 내려보내기만 해봤다.

하지만 오늘은 자식에서 부모로 데이터를 올려보내 보자.

 

여기서 핵심은 자식에서 새로 생성하는 데이터를 부모에게 보내주는 것처럼 보이지만,

사실은 부모가 가진 데이터를 props 로 물려주면 → 자식이 가공한 뒤 → 다시 부모한테 돌려주는 방식 이다.

자, 그럼 한번 실습해보자!

 

 

부모가 자식에게 props 전달하는 방법이 궁금하시다면 ? ↓↓↓ 

React(34) 리액트 훅 - 부모가 자식에게 props 전달하기

 

 

---

React(53) 타입스크립트 -  체크박스 약관 선택 이벤트 / 자식에서 부모로 데이터 보내기

 

결과화면 미리보기 

1. 부모 컴포넌트에 있는 체크박스이다.

 

2. 자식 컴포넌트에 있는 약관을 읽고 맨 아래의 동의 버튼을 누르면,

3. 약관확인 란에 자동으로 체크가 된다.

 

 

부모 컴포넌트 Contract.tsx

export const Contract = (): ReactElement => {
  const [check, setCheck] = useState<boolean>(false); // 체크박스 상태변수
  const getCheck = (check: boolean): void => { 	      // 보낼 변수를 함수에 담는다.
    setCheck(check);
  };

  return(  
    <Terms getCheck={getCheck} /> 		      // props로 담아 함수를 통째로 내려보내자
  );
}

 

자식 컴포넌트 Terms.tsx

interface TermsProps {
  getCheck: (arg: boolean) => void;	// 부모님께 물려받은 props 함수를 인터페이스로 선언
  close: () => void;
}

export const Terms = (props: TermsProps): ReactElement => {
  function acceptTerms() {
    props.getCheck(true);		// props 로 받은 데이터를 변경해주자
    props.close();
  }
  
 return (
   <button onClick={acceptTerms}>
      약관 동의
   </button>
 )
}