({product}) - это называется деструктуризация.
Ведь компонент принимает props.
const Component = (props) => {
return (
<div>{props.product}</div>
)
}
А когда ты пишешь вот так: ( { product } ), то ты просто разворачиваешь props, достаёшь оттуда значение product
И вместо того, чтобы писать props.product, ты будешь писать просто product, так как ты уже раскрыл его.
Главное, что имя совпадало с именем пропса.
Деструктуризация почитай.
