React 19 Tutorial - 16 - Event Handlers as Props
- 재사용 가능한 컴포넌트가 다양한 상황에서 다른 동작을 해야 할 때, 자식 컴포넌트가 아닌 부모 컴포넌트가 그 동작을 제어해야 한다. 🔄
- 자식 컴포넌트가 부모에게 "내가 클릭되었어!"와 같은 이벤트를 알리기 위해, 이벤트 핸들러 함수를 props로 전달하는 방식을 사용한다. 🗣️
ActionButton 예시처럼, 자식은 onClick prop을 받아 버튼 이벤트에 연결하고, 부모는 각자의 로직을 담은 함수를 이 prop으로 넘겨준다. 👆
MenuItem 예시처럼, 자식 컴포넌트가 가진 특정 데이터(예: 이름, 가격)를 부모에게 전달해야 할 때도 이벤트 핸들러 prop을 통해 데이터를 인자로 넘겨줄 수 있다. 📤
- 이때, 함수가 즉시 실행되는 것을 막기 위해
() => handler(data)와 같이 래핑하여 전달하는 것이 중요하다. 🚫
- 이 '이벤트 핸들러를 props로 전달하는' 패턴은 React에서 재사용 가능한 컴포넌트를 만들고 유연한 동작을 구현하는 데 있어 매우 근본적이고 필수적인 개념이다. 💡
- 다음 강의에서는 React의 핵심 개념인 '상태(State)'에 대해 다룰 예정이다. 🚀
데브허브 | DEVHUB | React 19 Tutorial - 16 - Event Handlers as Props