상태 끌어올리기 (feat. 제어 컴포넌트 & 비제어 컴포넌트) ✅ 컴포넌트 간의 상태공유 두 컴포넌트의 상태가 항상 동시에 변경되기를 원할 때는 각각의 컴포넌트에서 상태를 제거하고, 가장 가까운 공통 부모 컴포넌트로 이동한 다음에 이를 props를 통해서 자식 컴포넌트에 전달하는 방식을 사용하자. 이를 상태 끌어올리기(Lifting state up)라고 한다. 상태 끌어올리기 예제 아래 예제에서는 부모 컴포넌트인 Accordion이 두 개의 Panel 컴포넌트를 렌더링한다. 각각의 Panel 컴포넌트는 isActive 라는 boolean 상태를 가지고 있으며 이 상태에 따라 해당 Panel의 내용이 보이거나 감추어진다. (한 패널의 버튼을 클릭했을 때, 다른 패널에 영향을 주지 않는 독립적인 방식에 주목하자.) // App.js import { useState } .. 2023. 9. 17. 이전 1 다음