본문 바로가기
React

[React] 하위 컴포넌트에서 상위컴포넌트로 이벤트 전달 방법

by devebucks 2022. 7. 6.
728x90

리액트에서 하위 컴포넌트가 상위 컴포넌트의 함수를 실행하는 방법

 

상위 컴포넌트

export default function 상위 컴포넌트() {
  const [isEditMode, setIsEditMode] = useState(false);
  function closeEditMode() {
    setIsEditMode(false);
  }
  return (
    <하위 컴포넌트 closeEditMode={closeEditMode} />
  )
}

 

하위 컴포넌트

export default function 하위컴포넌트({ closeEdit }) {
  async function editTweet(event) {
    event.preventDefault();
    try {
      서버로 무언가 submit
      closeEdit(); 👈 이 부분이 상위 컴포넌트의 함수를 실행시킴
    } catch (error) {
      alert(error);
    }
  } 
}
728x90

댓글