FeedPage는 Klaystagram
컨트랙트와 상호작용하는 3개의 주요 컴포넌트로 이루어져 있습니다.
7-2. UploadPhoto
component
7-3. Feed
component
7-4. TransferOwnership
컴포넌트
// src/pages/FeedPage.js
const FeedPage = () => (
<main className="FeedPage">
<UploadButton /> // 7-2. UploadPhoto 컴포넌트
<Feed /> // 7-3. Feed 컴포넌트
</main>
)
// src/components/Feed.js
<div className="Feed">
{feed.length !== 0
? feed.map((photo) => {
// ...
return (
<div className="FeedPhoto" key={id}>
// ...
{
userAddress.toUpperCase() === currentOwner.toUpperCase() && (
<TransferOwnershipButton // 7-4. TransferOwnership 컴포넌트
className="FeedPhoto__transferOwnership"
id={id}
issueDate={issueDate}
currentOwner={currentOwner}
/>
)
}
// ...
</div>
)
})
: <span className="Feed__empty">No Photo :D</span>
}
</div>
)
아래 세 단계에 걸쳐 컴포넌트가 컨트랙트와 상호작용하도록 합니다.
첫 번째, 프론트엔드와 컨트랙트를 연결하는 KlaystagramContract
인스턴스를 생성합니다. Second, using KlaystagramContract
instance, make API functions that interact with contract in redux/actions
Third, call functions in each component
이제 구현해보죠!