상태와 Effect

4주차에서는 DOM을 직접 조작하는 방식으로 추가/삭제/필터/검색/API 연동 등 아기사자 명단의 동적 기능을 구현했습니다. 5주차에서는 같은 화면을 React로 옮기면서 컴포넌트 분리와 props 전달을 연습했지만, 정적 데이터를 표시하는 수준에 머물렀고 실제 상태 관리나 이벤트 처리까지는 다루지 않았습니다.

6주차에서는 4주차에 구현했던 동적 기능들(추가/삭제/필터/정렬/검색/API 연동)을 React 방식으로 다시 만들어봅니다. 카드를 직접 만들고 DOM에 붙이는 대신, 배열 상태를 변경하면 React가 알아서 필요한 카드를 렌더링하는 방식입니다. 이벤트 리스너를 일일이 등록하는 대신, props로 핸들러를 전달해 컴포넌트가 알아서 처리하도록 합니다. 같은 기능을 만들되, "DOM을 어떻게 조작할까"가 아니라 "상태가 어떻게 바뀌어야 할까"를 고민하게 됩니다.

이 과정을 통해 React의 핵심인 "상태가 UI를 만든다"는 원리를 체득하게 됩니다. 더 이상 화면을 직접 건드리지 않고, 데이터만 바꾸면 React가 알아서 화면을 동기화하는 선언적 UI 방식에 익숙해지는 것이 이번 미션의 목표입니다.